SASS install කරමු - Linux

[dhanush_c]

SASS කියන්නේ CSS preprossesor එකක්. ඒ වගේම CSS වලට වඩා ලේසියෙන් CSS styling code කරන්න පුළුවන් SASS වලින්. CSS වලින් කරන වැඩ ප්‍රමාණය අඩු කරලා ඒ දේවල් ටික පහසුවෙන් කරන්න පුළුවන් වෙන්න තමයි SASS හඳුන්වලා දුන්නේ. දැන් බලමු කොහොමද Install කරගන්නේ කියලා.

මේකට මුලින්ම ruby install කරගන්න ඕන. SASS ruby gem එකක් විදියට තමයි තියෙන්නේ. Ruby install කරගන්න මේ පොස්ට් එක බලන්න.

දැන් තියෙන්නේ SASS gem එක install කරගන්න.

sudo gem install sass

දැන් මේ command එක දීලා test කරලා බලන්න.

sass -v

installation part එක ඉවරයි. දැන් බලමු sass compile කරන්නේ කොහොමද කියලා.

මුලින්ම file එක create කරගන්න ඕන.

nano style.scss

ඊටපස්සේ sass code එක ලියන්න ඕන. syntax ගොඩක් දුරට css වලට සමානයි. structure එක විතරයි වෙනස්.

div{
  width: 90%;
  margin: 0 auto;
  
  p{
    background-color:red;
    border-radius: 5pc;
  }
}

දැන් file එක save කරගන්න ctrl+x සහ y දීලා enter කරන්න.

දැන් file එක sass වලින් compile කරගන්න ඕන.

sass --watch style.scss:style.css

මේ විදියට compile කරගත්ත sass file එකේ changes වලට sass compiler එක listen කරනවා. sass file එකේ change එකක් උනොත් re-compile කරලා අලුත් css file එක generate කරනවා.

සාමාන්‍යයෙන් අපි sass stylesheet එකක් develop කරද්දී කොටස් වලට වෙන් කරලා තමයි code කරන්නේ. එහෙම වෙලාවට ඒ සේරම sass file ටික compile කරලා වෙන වෙනම css files හදාගන්න හදාගන්න පුළුවන් මේ command එකෙන්.

sass --watch stylesheets/sass:stylesheets/css

sass watch mode එකෙන් අයින් වෙන්න ctrl+c press කරන්න.

SASS වලින් කරන්න පුළුවන් වැඩ වෙන පොස්ට් එකකින් විස්තර කරන්නම්.




බ්ලොග් එක පැත්තේ එන්න..

 

[විල්සන් මාමා]

Mokakda machan SAAS use karana eke thiyena added advantage eka?

 

[කඩ්ඩ බැරි එකා]

ඇත්ටම sass, less වගේ css preprocessor වලින් වෙන්නේ ලේසියෙන් css use කරන්න දෙනවට වඩා ගොඩක් smart විදියට සහ css maintain කරන්න හොඳ පහසුවක් දෙන එක.

උදාහරණයක් කියනව නම් css වල variables වගේ දේවල් නෑ නමුත් මේ වගේ css preprocessors එක්ක variables, functions , mixins වගේ යූස් කරල අපේ css files හොඳට මේන්ටේන් කරන්න පුලුවන්.

 

[dhanush_c]

Mokakda machan SAAS use karana eke thiyena added advantage eka?

ඇත්ටම sass, less වගේ css preprocessor වලින් වෙන්නේ ලේසියෙන් css use කරන්න දෙනවට වඩා ගොඩක් smart විදියට සහ css maintain කරන්න හොඳ පහසුවක් දෙන එක.

උදාහරණයක් කියනව නම් css වල variables වගේ දේවල් නෑ නමුත් මේ වගේ css preprocessors එක්ක variables, functions , mixins වගේ යූස් කරල අපේ css files හොඳට මේන්ටේන් කරන්න පුලුවන්.

patta machan!! elatama explain karala thiyanawa

 

[විල්සන් මාමා]

ඇත්ටම sass, less වගේ css preprocessor වලින් වෙන්නේ ලේසියෙන් css use කරන්න දෙනවට වඩා ගොඩක් smart විදියට සහ css maintain කරන්න හොඳ පහසුවක් දෙන එක.

උදාහරණයක් කියනව නම් css වල variables වගේ දේවල් නෑ නමුත් මේ වගේ css preprocessors එක්ක variables, functions , mixins වගේ යූස් කරල අපේ css files හොඳට මේන්ටේන් කරන්න පුලුවන්.

Thanks

 

[Wild-EYE]

Bump

 

[Executer]

 

[sajith.xp.pk]

elaz...

 

[buddi9]

thnks mchn, sass use krna widhath digtama liynna...

 

[dakshinasd]

ඇත්ටම sass, less වගේ css preprocessor වලින් වෙන්නේ ලේසියෙන් css use කරන්න දෙනවට වඩා ගොඩක් smart විදියට සහ css maintain කරන්න හොඳ පහසුවක් දෙන එක.

උදාහරණයක් කියනව නම් css වල variables වගේ දේවල් නෑ නමුත් මේ වගේ css preprocessors එක්ක variables, functions , mixins වගේ යූස් කරල අපේ css files හොඳට මේන්ටේන් කරන්න පුලුවන්.

Anith eka modules widihata wena wenama files wala maintain karanna puluwan code base eka.

Thawa GruntJS wage building script ekak ekka use karala automate karanna puluwan front end development eka.

 

[terminator.101]

සුපිරි

 

[C h o p p e]

ela

 

[coolmanaram]

TFS mchn - 8+

 

[kellsupun]

bumpz

 

[Amith0424]

tfs

 

[dhanush_c]

thnks mchn, sass use krna widhath digtama liynna...

aniwa bro..


Thanks all

 

[tharakanilupul]

Thanks!

 

[sajith.xp.pk]

patta machan. thanks

 

[KRipTER]

Good work bro..
Keep it up...
Rep++

 

[BadBlueGenius]

bumpp