ބޫޓްސްޓްރެޕް އެވެ

ބޫޓްސްޓްރެޕް އާއި އެކު LESS ބޭނުން ކުރުމެވެ

ބޫޓްސްޓްރެޕްގެ ސީއެސްއެސް ބިލްޑް ކުރުމަށް ބޭނުންކުރާ ވެރިއޭބަލްތަކާއި، މިކްސިންތަކާއި، އަދި އެހެނިހެން ކަންކަމުގެ ފައިދާ ނަގަން ސީއެސްއެސް ޕްރީޕްރޮސެސަރެއް ކަމަށްވާ LESS އިން ބޫޓްސްޓްރެޕް ކަސްޓަމައިޒްކޮށް އެކްސްޓެންޑް ކޮށްލާށެވެ .

ލެސް އިން ބިނާކޮށްފައިވާ އެއްޗެކެވެ

ކީއްވެ ލެސް؟

ބޫޓްސްޓްރެޕް ހެދީ LESS އެޓް އިޓްސް ކޯރ އިން، އަހަރެމެންގެ ރަނގަޅު އެކުވެރިޔާ، އެލެކްސިސް ސެލިއަރ އުފެއްދެވި ޑައިނަމިކް ސްޓައިލްޝީޓް ލޭންގުއޭޖެކެވެ . އެއީ ސިސްޓަމްތަކަށް ބިނާކޮށް ސީއެސްއެސް ޑިވެލޮޕް ކުރުން އަވަސް، ފަސޭހަ، އަދި މަޖާ ކޮށްދޭ ކަމެކެވެ.

ހިމެނެނީ ކޮން އެއްޗެއް ހެއްޔެވެ؟

ސީއެސްއެސްގެ އެކްސްޓެންޝަނެއްގެ ގޮތުގައި ލެސްސްގައި ހިމެނެނީ ވެރިއޭބަލްތަކާއި، ރީޔޫޒް ކުރެވޭ ކޯޑްތަކުގެ ސްނިޕެޓްތަކަށް މިކްސިންތަކާއި، ސާދާ ހިސާބުތަކާއި، ނެސްޓިންގ އާއި، އަދި ކުލަ ފަންކްޝަންތަކަށް ވެސް އޮޕަރޭޝަންތަކެވެ.

އިތުރަށް ދަސްކުރައްވާ

ލެސް ސީއެސްއެސް

އިތުރު މަޢުލޫމާތު ހޯއްދެވުމަށް ރަސްމީ ވެބްސައިޓް http://lesscss.org/ އަށް ޒިޔާރަތް ކުރައްވާ.

ވެރިއޭބަލްސް އެވެ

ސީއެސްއެސްގައި ކުލަތަކާއި ޕިކްސެލް ވެލިއުތައް މެނޭޖްކުރުމަކީ ތަންކޮޅެއް ވޭންދެނިވި ކަމެއް ކަމަށާއި، އާންމުކޮށް ކޮޕީ ޕޭސްޓް އިން ފުރިފައިވާ ކަމެއް ކަމަށް ވެސް ވިދާޅުވި އެވެ. LESS އާއެކު ނޫން ނަމަވެސް- ކުލަތައް ނުވަތަ ޕިކްސެލް ވެލިއުތައް ވެރިއޭބަލްތަކެއްގެ ގޮތުގައި ހަވާލުކޮށް އެއްފަހަރު ބަދަލުކޮށްލާށެވެ.

މިކްސިންސް އެވެ

އެ ތިން ބޯޑަރ-ރޭޑިއަސް ޑިކްލެރޭޝަން ތިޔަބޭފުޅުން ރެގިއުލާ އޯލް' ސީއެސްއެސްގައި ހަދަން ޖެހޭ؟ މިހާރު އެމީހުން އެއް ލައިނަށް ތިރިވެފައިވަނީ މިކްސިންސްގެ އެހީގައި، ކޮންމެ ތަނެއްގައިވެސް އަލުން ބޭނުންކުރެވޭނެ ކޯޑްގެ ސްނިޕެޓްތަކެކެވެ.

އޮޕަރޭޝަންސް

އޮޕަރޭޝަންތަކާއެކު ހިސާބު އޮން ދަ ފްލައި ކޮށްގެން ތިމާގެ ގްރިޑް، ލީޑިންގ، އަދި އިތުރަށް ސުޕަރ ފްލެކްސިބަލް ކޮށްލާށެވެ. ސީއެސްއެސް ސޭނިޓީއަށް ތިބާގެ މަގު ގިނަކޮށް، ބަހާލައި، އިތުރުކޮށް، އުނިކޮށްލާށެވެ.

ބޫޓްސްޓްރަޕް ވެރިއޭބަލްސް LESS ވެރިއޭބަލްސް، އެތަކެތީގެ އަގުތައް، އަދި ބޭނުންކުރުމުގެ ގައިޑްލައިންސް

ހައިޕަރލިންކްސް އެވެ

@linkColor #08ގ ޑިފޯލްޓް ލިންކް ޓެކްސްޓް ކުލަ
@linkColorHover darken(@linkColor, 15%) ޑިފޯލްޓް ލިންކް ޓެކްސްޓް ހޯވަރ ކުލަ

ގްރިޑް ސިސްޓަމް

@gridColumns 12
@gridColumnWidth 60ޕީއެކްސް އެވެ
@gridGutterWidth 20ޕީއެކްސް އެވެ
@fluidGridColumnWidth 6.382978723% އެވެ.
@fluidGridGutterWidth 2.127659574% އެވެ.

ޓައިޕޮގްރަފީ އެވެ

@baseFontSize 13ޕީއެކްސް އެވެ
@baseFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@baseLineHeight 18ޕީއެކްސް އެވެ

ގްރޭސްކޭލް ކުލަތަކެވެ

@black #000 އެވެ
@grayDarker #222
@grayDark #333
@gray #555
@grayLight #999
@grayLighter #eee
@white #fff

އެކްސެންޓް ކުލަތަކެވެ

@blue #049ސީޑީބީ އެވެ
@green #46a546 އެވެ
@red #9d261d އެވެ
@yellow #ffc40d އެވެ
@orange #f89406 އެވެ
@pink #c3325f އެވެ
@purple #7a43b6 އެވެ

ކޮމްޕޯނެންޓްސް

ބަޓަންތަކެވެ

@primaryButtonBackground @linkColor

ފޯމުތައް

@placeholderText @grayLight

ނަވްބާރެވެ

@navbarHeight 40ޕީއެކްސް އެވެ
@navbarBackground @grayDarker
@navbarBackgroundHighlight @grayDark
@navbarText @grayLight
@navbarLinkColor @grayLight
@navbarLinkColorHover @white

ސްޓޭޓްތަކާއި އެލާޓްތައް ފޯމްކުރުން

@warningText #f3edd2 އެވެ
@warningBackground #c09853 އެވެ
@errorText #b94a48 އެވެ
@errorBackground #f2dede އެވެ
@successText #468847 އެވެ
@successBackground #dff0d8 އެވެ
@infoText #3a87ad އެވެ
@infoBackground #d9edf7 އެވެ

ބޫޓްސްޓްރެޕް މިކްސިންސް އެވެ

މިކްސިންސް އާއި ބެހޭގޮތުން

އަސާސީ މިކްސިންސް އެވެ

އަސާސީ މިކްސިން އަކީ މުހިންމު ގޮތެއްގައި ސީއެސްއެސްގެ ސްނިޕެޓަކަށް އިންކްލޫޑް ނުވަތަ ޕާރޝިއަލް އެވެ. އެއީ ހަމަ ސީއެސްއެސް ކްލާހެއް ފަދައިން ލިޔެފައިވާ އެއްޗެހި ކަމުން ކޮންމެ ތަނަކަށް ވެސް ކިޔާލެވޭނެ އެވެ.

  1. . އެލިމެންޓް { .
  2.   . ކްލިއަރފިކްސް ();
  3. } .

ޕެރަމެޓްރިކް މިކްސިންސް އެވެ

ޕެރެމެޓްރިކް މިކްސިން އަކީ ހަމަ އަސާސީ މިކްސިން އެއްފަދަ އެއްޗެއް ނަމަވެސް، އިޚްތިޔާރީ ޑިފޯލްޓް ވެލިއުތަކާއެކު ޕެރެމިޓަރތައް (އެހެންކަމުން ނަން) ވެސް ބަލައިގަންނަ އެއްޗެކެވެ.

  1. . އެލިމެންޓް { .
  2.   . ބޯޑަރ - ރޭޑިއަސް ( 4px );
  3. } .

ފަސޭހައިން އަމިއްލައަށް އިތުރުކޮށްލާށެވެ

ބޫޓްސްޓްރެޕްގެ ގާތްގަނޑަކަށް ހުރިހާ މިކްސިންތަކެއް ރައްކާކުރެވިފައިވަނީ mixins.less ގައި ކަމަށާއި، މިއީ ޓޫލްކިޓްގައިވާ .less ފައިލްތަކުގެ ތެރެއިން ކޮންމެ ފައިލްއެއްގައިވެސް މިކްސިން ބޭނުންކުރެވޭނެ އަޖައިބު ކުރުވަނިވި ޔުޓިލިޓީ .less ފައިލެކެވެ.

އެހެންކަމުން، ކުރިއަށް ގޮސް މިހާރު ހުރި ތަކެތި ބޭނުންކޮށް ނުވަތަ ބޭނުންވާ ގޮތަށް އަމިއްލައަށް އިތުރުކޮށްލަން ހިތްހަމަޖެހިގެން އުޅެން ޖެހެއެވެ.

މިކްސިންތައް ހިމެނެއެވެ

ޔުޓިލިޓީސް އެވެ

މިކްސިން އެވެ ޕެރެމިޓަރސް ބޭނުން ކުރުން
.clearfix() އެއްޗެއްނޫން އެތެރޭގައި ފްލޯޓްތައް ސާފުކުރުމަށް އެއްވެސް ބެލެނިވެރިއަކަށް އިތުރުކޮށްލާށެވެ
.tab-focus() އެއްޗެއްނޫން ވެބްކިޓް ފޯކަސް ސްޓައިލް އަދި ވަށައިގެންވާ ފަޔަރފޮކްސް އައުޓްލައިން އެޕްލައި ކުރާށެވެ
.center-block() އެއްޗެއްނޫން އޮޓޯ ސެންޓަރ ބްލޮކް ލެވެލް އެލިމެންޓެއް ބޭނުންކޮށްގެންmargin: auto
.ie7-inline-block() އެއްޗެއްނޫން display: inline-blockއައިއީ7 ސަޕޯޓް ހޯދުމަށް ގަވާއިދުން ބޭނުން ކުރުމުގެ އިތުރުން ބޭނުން ކުރާށެވެ
.size() @height: 5px, @width: 5px އަވަހަށް އެއް ރޮނގެއްގައި އުސްމިނާއި ފުޅާމިން ސެޓް ކުރާށެވެ
.square() @size: 5px .size()ފުޅާމިނާއި އުސްމިން އެއް އަގެއްގެ ގޮތުގައި ސެޓް ކުރުމަށް ބިލްޑް އޮން ކުރެއެވެ
.opacity() @opacity: 100 މުޅި އަދަދުތަކުން، އޮޕަސިޓީ ޕަސެންޓް ސެޓްކުރުން (އެބަހީ، "50" ނުވަތަ "75")

ފޯމުތައް

މިކްސިން އެވެ ޕެރެމިޓަރސް ބޭނުން ކުރުން
.placeholder() @color: @placeholderText placeholderއިންޕުޓްތަކަށް ޓެކްސްޓް ކުލަ ސެޓްކުރުން

ޓައިޕޮގްރަފީ އެވެ

މިކްސިން އެވެ ޕެރެމިޓަރސް ބޭނުން ކުރުން
#font > #family > .serif() އެއްޗެއްނޫން އެލިމެންޓެއް ސެރިފް ފޮންޓް ސްޓޭކް ބޭނުންކުރާ ގޮތަށް ހަދާށެވެ
#font > #family > .sans-serif() އެއްޗެއްނޫން އެލިމެންޓެއް ސަންސް-ސެރިފް ފޮންޓް ސްޓޭކް ބޭނުންކުރާ ގޮތަށް ހަދާށެވެ
#font > #family > .monospace() އެއްޗެއްނޫން އެލިމެންޓެއް މޮނޮސްޕޭސް ފޮންޓް ސްޓޭކް ބޭނުންކުރާ ގޮތަށް ހަދާށެވެ
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight ފަސޭހައިން ފޮންޓް ސައިޒާއި ބަރުދަނާއި ލީޑިންގ ސެޓް ކުރެވޭނެއެވެ
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight ފޮންޓް ފެމިލީ ސެރިފް އަށް ސެޓްކޮށް، ސައިޒާއި ބަރުދަނާއި ލީޑިންގ ކޮންޓްރޯލް ކުރާށެވެ
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight ފޮންޓް ފެމިލީ sans-serif އަށް ސެޓްކޮށް، ސައިޒާއި ބަރުދަނާއި ލީޑިންގ ކޮންޓްރޯލް ކުރާށެވެ
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight ފޮންޓް ފެމިލީ މޮނޮސްޕޭސް އަށް ސެޓްކޮށް، ސައިޒާއި ބަރުދަނާއި ލީޑިންގ ކޮންޓްރޯލް ކުރާށެވެ

ގްރިޑް ސިސްޓަމް

މިކްސިން އެވެ ޕެރެމިޓަރސް ބޭނުން ކުރުން
.container-fixed() އެއްޗެއްނޫން @siteWidthތިމާގެ ކޮންޓެންޓް ހިފެހެއްޓުމަށްޓަކައި ފިކްސްޑް ވިޑްތް (ސެޓް ވިތު ) ކޮންޓެއިނަރެއް ފޯރުކޮށްދިނުން
.columns() @columns: 1 ކޮންމެ އަދަދަކަށް ކޮލަމް ވެސް ފުޅާވާ ގްރިޑް ކޮލަމެއް ބިނާކުރުން (ޑިފޯލްޓްކޮށް 1 ކޮލަމަށް)
.offset() @columns: 1 ކޮންމެ އަދަދަކަށް ކޮލަމް ވެސް ފުޅާވާ ކަނާތު މާރޖިން އެއް ހުންނަ ގްރިޑް ކޮލަމެއް އޮފްސެޓް ކުރާށެވެ
.gridColumn() އެއްޗެއްނޫން އެލިމެންޓެއް ގްރިޑް ކޮލަމެއް ފަދައިން ފްލޯޓް ކުރާ ގޮތަށް ހަދާށެވެ

ސީއެސްއެސް3 ޕްރޮޕަޓީސް އެވެ

މިކްސިން އެވެ ޕެރެމިޓަރސް ބޭނުން ކުރުން
.border-radius() @radius: 5px އުނިއިތުރެއްގެ ކޮޅުތައް ވަށާލާށެވެ. އެއް އަގެއް ނުވަތަ ޖާގަ ވަކިކޮށްފައިވާ ހަތަރު އަގަކަށް ވެދާނެއެވެ
.box-shadow() @shadow: 0 1px 3px rgba(0,0,0,.25) އެލިމެންޓަކަށް ޑްރޮޕް ޝެޑޯއެއް އިތުރުކޮށްލާށެވެ
.transition() @transition ސީއެސްއެސް3 ޓްރާންސިޝަން އިފެކްޓް އިތުރުކުރުން (އެބަހީ، all .2s linear)
.rotate() @degrees އުނިއިތުރެއް n ޑިގްރީއަށް އެނބުރުވާށެވެ
.scale() @ratio އެލިމެންޓެއް އޭގެ އަސްލު ސައިޒުގެ n ގުނައަށް ސްކޭލް ކުރާށެވެ
.translate() @x: 0, @y: 0 x އަދި y ޕްލޭންތަކުގައި އުފެއްދުމެއް ގެންދާށެވެ
.background-clip() @clip އެލިމެންޓެއްގެ ބެކްގްރައުޑް ކްރޮޕްކުރުން (އަށް ބޭނުންތެރި border-radius)
.background-size() @size ސީއެސްއެސް3 މެދުވެރިކޮށް ބެކްގްރައުންޑް އިމޭޖްތަކުގެ ސައިޒު ކޮންޓްރޯލް ކުރުން
.box-sizing() @boxmodel އެލިމެންޓަކަށް ފޮށި މޮޑެލް ބަދަލުކުރުން (އެބަހީ، border-boxފުލް ވިޑްތް އަކަށް input)
.user-select() @select ޞަފްޙާއެއްގައިވާ ލިޔުން ކަރސަރ ހޮވުން ކޮންޓްރޯލް ކުރުން
.resizable() @direction: both ކަނާތްފަރާތާއި ތިރީގައި ކޮންމެ އެލިމެންޓެއް ވެސް ސައިޒް ބަދަލުކުރެވޭ ގޮތަށް ހަދާށެވެ
.content-columns() @columnCount, @columnGap: @gridColumnGutter ކޮންމެ އެލިމެންޓެއްގެ ކޮންޓެންޓް ސީއެސްއެސް3 ކޮލަމްތައް ބޭނުންކުރާ ގޮތަށް ހަދާށެވެ

ބެކްގްރައުންޑްސް އާއި ގްރޭޑިއަންޓްސް

މިކްސިން އެވެ ޕެރެމިޓަރސް ބޭނުން ކުރުން
.#translucent > .background() @color: @white, @alpha: 1 އެލިމެންޓަކަށް ޓްރާންސްލޫސެންޓް ބެކްގްރައުންޑް ކުލައެއް ދޭށެވެ
.#translucent > .border() @color: @white, @alpha: 1 އެލިމެންޓަކަށް ޓްރާންސްލޫސެންޓް ބޯޑަރ ކުލައެއް ދޭށެވެ
.#gradient > .vertical() @startColor, @endColor ކްރޮސް ބްރައުޒާ ވަރުގަދަ ބެކްގްރައުންޑް ގްރޭޑިއަންޓެއް އުފެއްދުން
.#gradient > .horizontal() @startColor, @endColor ކްރޮސް ބްރައުޒާ ހޮރައިޒޮންޓަލް ބެކްގްރައުންޑް ގްރޭޑިއަންޓެއް އުފެއްދުން
.#gradient > .directional() @startColor, @endColor, @deg ކްރޮސް ބްރައުޒަރ ޑިރެކްޝަނަލް ބެކްގްރައުންޑް ގްރޭޑިއަންޓެއް އުފެއްދުން
.#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor ކްރޮސް ބްރައުޒަރ ތިން ކުލައިގެ ބެކްގްރައުންޑް ގްރޭޑިއަންޓެއް އުފެއްދުން
.#gradient > .radial() @innerColor, @outerColor ކްރޮސް ބްރައުޒަރ ރޭޑިއަލް ބެކްގްރައުންޑް ގްރޭޑިއަންޓެއް އުފެއްދުން
.#gradient > .striped() @color, @angle ކްރޮސް ބްރައުޒާ ސްޓްރައިޕްޑް ބެކްގްރައުންޑް ގްރޭޑިއަންޓެއް އުފެއްދުން
.#gradientBar() @primaryColor, @secondaryColor ގްރޭޑިއަންޓާއި ކުޑަކޮށް އަނދިރި ބޯޑަރެއް ޙަވާލުކުރުމަށް ބަޓަންތަކަށް ބޭނުންކުރެއެވެ

ލެސް އާއެކު ބޫޓްސްޓްރެޕް ކޮމްޕައިލް ކުރުން

ނޯޓް: ބަދަލުކޮށްފައިވާ ސީއެސްއެސް އާއި އެކު ގިޓްހަބަށް ޕުލް ރިކުއެސްޓެއް ހުށަހަޅަމުންދާނަމަ، މިއިން އެއްވެސް ގޮތެއް މެދުވެރިކޮށް ސީއެސްއެސް އަލުން ކޮމްޕައިލް ކުރަން ޖެހެއެވެ .

ކޮމްޕައިލް ކުރުމަށް ބޭނުންކުރާ ޓޫލްސް

މޭކްފައިލް އާއި އެކު ނޯޑް

ތިރީގައިވާ ކޮމާންޑް ހިންގައިގެން npm އާއެކު LESS ކޮމާންޑް ލައިން ކޮމްޕައިލަރ އިންސްޓޯލް ކުރާށެވެ.

$ npm އިންސްޓޯލް ކުރުން މަދު

އެއްފަހަރު އިންސްޓޯލް ވުމުން ހަމައެކަނި makeބޫޓްސްޓްރެޕް ޑައިރެކްޓަރީގެ ރޫޓުން ދުއްވާލާފައި ހުރިހާ ކަމެއް ސެޓް ވެއްޖެއެވެ.

މީގެ އިތުރުން watchr އިންސްޓޯލްކޮށްފައި އޮތްނަމަ، make watchbootstrap lib ގައި ފައިލްއެއް އެޑިޓް ކުރާ ކޮންމެ ފަހަރަކު bootstrap އޮޓޮމެޓިކުން ރީބިލްޓް ކުރުމަށް ދުއްވައިލެވިދާނެ (މިއީ ކޮންމެހެން ކުރަންޖެހޭ ކަމެއް ނޫން، ހަމައެކަނި ފަސޭހަ ގޮތެކެވެ).

ކޮމާންޑް ލައިން

ނޯޑް މެދުވެރިކޮށް ލެސް ކޮމާންޑް ލައިން ޓޫލް އިންސްޓޯލްކޮށް ތިރީގައިވާ ކޮމާންޑް ހިންގާށެވެ.

$ lessc ./lib/bootstrap.less > ބޫޓްސްޓްރެޕް.ސީއެސްއެސް

--compressބައެއް ބައިޓްތައް ސޭވް ކުރަން އުޅޭނަމަ އެ ކޮމާންޑުގައި ހިމަނަން ޔަގީން ކުރައްވާ !

ޖާވާސްކްރިޕްޓް

އެންމެ ފަހުގެ Less.js ޑައުންލޯޑްކޮށް އެއަށް ދާނެ މަގު (އަދި Bootstrap) ގައި ހިމަނާށެވެ <head>.

<link rel = "ސްޓައިލްޝީޓް/ލެސް" href = "/މަގު/އަށް/ބޫޓްސްޓްރެޕް.ލެސް" > <script src = "/މަގު/އަށް/ލެސް.ޖޭއެސް" ></script>

.less ފައިލްތައް އަލުން ކޮމްޕައިލް ކުރުމަށްޓަކައި ހަމައެކަނި ސޭވްކޮށް ޕޭޖް އަލުން ލޯޑް ކޮށްލާށެވެ. Less.js އިން އެތަކެތި ކޮމްޕައިލްކޮށް ލޯކަލް ސްޓޯރޭޖްގައި ރައްކާކުރެއެވެ.

ނުރަސްމީ މެކް އެޕް

ނުރަސްމީ މެކް އެޕް އިން .ލެސް ފައިލްތަކުގެ ޑައިރެކްޓަރީތައް ބަލައި، ބަލާފައިވާ .ލެސް ފައިލް ސޭވް ކުރާ ކޮންމެ ސޭވް އަކަށް ފަހު ކޯޑް ލޯކަލް ފައިލްތަކަށް ކޮމްޕައިލް ކުރެ އެވެ.

ކަމުދާނަމަ އެޕްގައި ހުންނަ ޕްރެފެރެންސްތައް އޮޓޮމެޓިކުން މިނިފައި ކުރުމަށް ޓޮގްލް ކުރެވޭނެ ކަމަށާއި ކޮމްޕައިލް ކުރެވިފައިވާ ފައިލްތައް ނިމޭނީ ކޮން ޑައިރެކްޓަރީއެއްގައި ކަމަށް ވެސް ވިދާޅުވި އެވެ.

އިތުރު މެކް އެޕްތަކެއް

ކްރަންޗް އެވެ

ކްރަންޗަކީ އެޑޯބް އެއާގައި ބިނާކޮށްފައިވާ މޮޅު ގޮތަކަށް ފެންނަ ލެސް އެޑިޓަރެއް އަދި ކޮމްޕައިލަރެކެވެ.

ކޯޑްކިޓް އެވެ

ނުރަސްމީ މެކް އެޕް އާއި އެއް ފިރިހެނަކު އުފެއްދި ކޯޑްކިޓަކީ ލެސް، ސާސް، ސްޓައިލަސް، އަދި ކޮފީސްކްރިޕްޓް ކޮމްޕައިލް ކުރާ މެކް އެޕެކެވެ.

ސާދާ ނޫން

ލެސް ފައިލްތައް ޑްރެގް އެންޑް ޑްރޮޕް ކޮމްޕައިލް ކުރުމަށް މެކް، ލިނަކްސް، އަދި ޕީސީ އެޕް. ޕްލަސް، ސޯސް ކޯޑް ހުންނަނީ ގިޓްހަބް ގައެވެ .