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

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

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

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

ކީއްވެ ލެސް؟

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

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

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

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

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

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

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

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

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

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

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

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

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

ސްކެފޯލްޑިންގ އާއި ލިންކްސް

@bodyBackground @white ޞަފްޙާގެ ފަހަތުގެ ކުލަ
@textColor @grayDark މުޅި ހަށިގަނޑާއި، ސުރުޚީތަކާއި، އަދި އެހެނިހެން ކަންކަމަށް ޑިފޯލްޓް ޓެކްސްޓް ކުލަ
@linkColor #08c ޑިފޯލްޓް ލިންކް ޓެކްސްޓް ކުލަ
@linkColorHover darken(@linkColor, 15%) ޑިފޯލްޓް ލިންކް ޓެކްސްޓް ހޯވަރ ކުލަ

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

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

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

@sansFontFamily "ހެލްވެޓިކާ ނިއު"، ހެލްވެޓިކާ، އެރިއަލް، ސަންސް-ސެރިފް
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily މެންލޯ، މޮނާކޯ، "ކުއަރިއަރ ނިއު"، މޮނޮސްޕޭސް
@baseFontSize 13ޕީއެކްސް އެވެ ޕިކްސެލްތަކަކަށް ވާންޖެހެއެވެ
@baseFontFamily @sansFontFamily
@baseLineHeight 18ޕީއެކްސް އެވެ ޕިކްސެލްތަކަކަށް ވާންޖެހެއެވެ
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

މޭޒުތަކެވެ

@tableBackground transparent
@tableBackgroundAccent #f9f9f9
@tableBackgroundHover #f5f5f5
@tableBorder ddd

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

@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 އެވެ

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

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

@btnBackground @white
@btnBackgroundHighlight darken(@white, 10%)
@btnBorder darken(@white, 20%)
@btnPrimaryBackground @linkColor
@btnPrimaryBackgroundHighlight spin(@btnPrimaryBackground, 15%)
@btnInfoBackground #5bc0de
@btnInfoBackgroundHighlight #2f96b4
@btnSuccessBackground #62c462
@btnSuccessBackgroundHighlight 51a351
@btnWarningBackground lighten(@orange, 15%)
@btnWarningBackgroundHighlight @orange
@btnDangerBackground #ee5f5b
@btnDangerBackgroundHighlight #bd362f
@btnInverseBackground @gray
@btnInverseBackgroundHighlight @grayDarker

ފޯމުތައް

@placeholderText @grayLight
@inputBackground @white
@inputBorder #ccc
@inputBorderRadius 3px
@inputDisabledBackground @grayLighter
@formActionsBackground #f5f5f5

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

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

ނަވްބާރެވެ

@navbarHeight 40ޕީއެކްސް އެވެ
@navbarBackground @grayDarker
@navbarBackgroundHighlight @grayDark
@navbarText @grayLight
@navbarLinkColor @grayLight
@navbarLinkColorHover @white
@navbarLinkColorActive @navbarLinkColorHover
@navbarLinkBackgroundHover transparent
@navbarLinkBackgroundActive @navbarBackground
@navbarSearchBackground lighten(@navbarBackground, 25%)
@navbarSearchBackgroundFocus @white
@navbarSearchBorder darken(@navbarSearchBackground, 30%)
@navbarSearchPlaceholderColor #ccc
@navbarBrandColor @navbarLinkColor

ޑްރޮޕްޑައުންސް އެވެ

@dropdownBackground @white
@dropdownBorder rgba(0,0,0,.2)
@dropdownLinkColor @grayDark
@dropdownLinkColorHover @white
@dropdownLinkBackgroundHover @linkColor

ހީރޯ ޔުނިޓެވެ

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

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

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

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

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

  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 @width އަވަހަށް އެއް ރޮނގެއްގައި އުސްމިނާއި ފުޅާމިން ސެޓް ކުރާށެވެ
.square() @size .size()ފުޅާމިނާއި އުސްމިން އެއް އަގެއްގެ ގޮތުގައި ސެޓް ކުރުމަށް ބިލްޑް އޮން ކުރެއެވެ
.opacity() @opacity މުޅި އަދަދުތަކުން، އޮޕަސިޓީ ޕަސެންޓް ސެޓްކުރުން (އެބަހީ، "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() އެއްޗެއްނޫން ތިމާގެ ކޮންޓެންޓް ހިފެހެއްޓުމަށްޓަކައި ހޮރައިޒޮންޓަލީ ސެންޓަރޑް ކޮންޓެއިނަރެއް އުފައްދާށެވެ
#grid > .core() @gridColumnWidth, @gridGutterWidth n ކޮލަމް އަދި x ޕިކްސެލް ވައިޑް ގަޓަރ އާއި އެކު ޕިކްސެލް ގްރިޑް ސިސްޓަމެއް (ކޮންޓެއިނަރ، ރޯ، އަދި ކޮލަމް) އުފައްދާށެވެ
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth n ކޮލަމް އަދި x % ފުޅާ ގަޓަރެއް އެކުލެވޭ ޕްރެސެންޓް ގްރިޑް ސިސްޓަމެއް އުފެއްދުން
#grid > .input() @gridColumnWidth, @gridGutterWidth އެލިމެންޓްތަކަށް ޕިކްސެލް ގްރިޑް ސިސްޓަމް ޖެނެރޭޓް inputކުރުމާއި، ޕެޑިންގ އަދި ބޯޑަރސް އަށް އެކައުންޓިންގ ހެދުން
.makeColumn @columns: 1, @offset: 0 ކްލާސްތައް ނެތި އެއްވެސް divއެއްޗެއް ގްރިޑް ކޮލަމަކަށް ބަދަލުކޮށްލާށެވެ.span*

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

މިކްސިން އެވެ ޕެރެމިޓަރސް ބޭނުން ކުރުން
.border-radius() @radius އުނިއިތުރެއްގެ ކޮޅުތައް ވަށާލާށެވެ. އެއް އަގެއް ނުވަތަ ޖާގަ ވަކިކޮށްފައިވާ ހަތަރު އަގަކަށް ވެދާނެއެވެ
.box-shadow() @shadow އެލިމެންޓަކަށް ޑްރޮޕް ޝެޑޯއެއް އިތުރުކޮށްލާށެވެ
.transition() @transition ސީއެސްއެސް3 ޓްރާންސިޝަން އިފެކްޓް އިތުރުކުރުން (އެބަހީ، all .2s linear)
.rotate() @degrees އުނިއިތުރެއް n ޑިގްރީއަށް އެނބުރުވާށެވެ
.scale() @ratio އެލިމެންޓެއް އޭގެ އަސްލު ސައިޒުގެ n ގުނައަށް ސްކޭލް ކުރާށެވެ
.translate() @x, @y x އަދި y ޕްލޭންތަކުގައި އުފެއްދުމެއް ގެންދާށެވެ
.background-clip() @clip އެލިމެންޓެއްގެ ބެކްގްރައުންޑް ކްރޮޕްކުރުން (އަށް ބޭނުންތެރި border-radius)
.background-size() @size ސީއެސްއެސް3 މެދުވެރިކޮށް ބެކްގްރައުންޑް އިމޭޖްތަކުގެ ސައިޒު ކޮންޓްރޯލް ކުރުން
.box-sizing() @boxmodel އެލިމެންޓަކަށް ފޮށި މޮޑެލް ބަދަލުކުރުން (އެބަހީ، border-boxފުލް ވިޑްތް އަކަށް input)
.user-select() @select ޞަފްޙާއެއްގައިވާ ލިޔުން ކަރސަރ ހޮވުން ކޮންޓްރޯލް ކުރުން
.backface-visibility() @visibility: visible ސީއެސްއެސް 3ޑީ ޓްރާންސްފޯމްތައް ބޭނުންކުރާއިރު ކޮންޓެންޓް ފްލިކަރ ވުން ހުއްޓުވުން
.resizable() @direction: both ކަނާތްފަރާތާއި ތިރީގައި ކޮންމެ އެލިމެންޓެއް ވެސް ސައިޒް ބަދަލުކުރެވޭ ގޮތަށް ހަދާށެވެ
.content-columns() @columnCount, @columnGap: @gridGutterWidth ކޮންމެ އެލިމެންޓެއްގެ ކޮންޓެންޓް ސީއެސްއެސް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 ކޮމާންޑް ލައިން ކޮމްޕައިލަރ އަދި uglify-js ގްލޯބަލްކޮށް އިންސްޓޯލް ކުރާށެވެ.

$ npm އިންސްޓޯލް -g މަދު uglify-js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ސާދާ ނޫން

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