އެކްސްޓެންޑް · ބޫޓްސްޓްރެޕް މޯލްޑިވިއަންގައެވެ

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

ކީއްވެ ލެސް؟

ބޫޓްސްޓްރެޕްގެ އެއް އުފެއްދުންތެރިއަކު މިކަމާ ބެހޭގޮތުން އަވަސް ބްލޮގް ޕޯސްޓެއް ލިޔުއްވި , މިތަނުގައި ޚުލާޞާކޮށްލާނަމެވެ:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ސާދާ ނޫން

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

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

ފައިލް ސްޓްރަކްޗަރ ސެޓަޕް ކުރުން

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

  އެޕް/
      ލޭއައުޓްސް/
      ޓެމްޕްލޭޓްތައް/
  ޢާންމު/
      ސީއެސްއެސް/
          ބޫޓްސްޓްރެޕް.މިން.ސީއެސްއެސް އެވެ
      ޖޭއެސް/
          ބޫޓްސްޓްރެޕް.މިން.ޖޭއެސް އެވެ
      img/
          ގްލައިފިކޮންސް-ހަފްލިންގްސް.ޕީއެންޖީ
          ގްލައިފިކޮންސް-ހަފްލިންގްސް-ވައިޓް.ޕީއެންޖީ

ސްޓާޓަރ ޓެމްޕްލޭޓް ބޭނުންކުރުން

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

<html> އެވެ
  <ބޮލުގައި> އެވެ
    <title> ބޫޓްސްޓްރެޕް 101 ޓެމްޕްލޭޓް </title>
    <!-- ބޫޓްސްޓްރެޕް -->
    <link href = "ޕަބްލިކް/ސީއެސްއެސް/ބޫޓްސްޓްރެޕް.މިން.ސީއެސްއެސް" rel = "ސްޓައިލްޝީޓް" >  
  </head> އެވެ
  <ހަށިގަނޑު> އެވެ
    <h1> ހެލޯ، ދުނިޔެ! </h1> އެވެ
    <!-- ބޫޓްސްޓްރެޕް -->
    <script src = "ޕަބްލިކް/ޖޭއެސް/ބޫޓްސްޓްރެޕް.މިން.ޖޭއެސް" ></script> 
  </body> އެވެ
</html> އެވެ

ކަސްޓަމް ކޯޑްގެ މައްޗަށް ލޭޔަރ

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

<html> އެވެ
  <ބޮލުގައި> އެވެ
    <title> ބޫޓްސްޓްރެޕް 101 ޓެމްޕްލޭޓް </title>
    <!-- ބޫޓްސްޓްރެޕް -->
    <link href = "ޕަބްލިކް/ސީއެސްއެސް/ބޫޓްސްޓްރެޕް.މިން.ސީއެސްއެސް" rel = "ސްޓައިލްޝީޓް" >  
    <!-- މަޝްރޫޢު -->
    <link href = "ޕަބްލިކް/ސީއެސްއެސް/އެޕްލިކޭޝަން.ސީއެސްއެސް" rel = "ސްޓައިލްޝީޓް" >  
  </head> އެވެ
  <ހަށިގަނޑު> އެވެ
    <h1> ހެލޯ، ދުނިޔެ! </h1> އެވެ
    <!-- ބޫޓްސްޓްރެޕް -->
    <script src = "ޕަބްލިކް/ޖޭއެސް/ބޫޓްސްޓްރެޕް.މިން.ޖޭއެސް" ></script> 
    <!-- މަޝްރޫޢު -->
    <script src = "ޕަބްލިކް/ޖޭއެސް/އެޕްލިކޭޝަން.ޖޭއެސް" ></script> 
  </body> އެވެ
</html> އެވެ

އެކްސްޓެންޑިންގ ބޫޓްސްޓްރެޕް

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