How to Install and compile SASS on Linux


SASS කියන්නේ CSS preprossesor එකක්. SASS කියන එකේ තේරුම වෙන්නේ Syntactically Awesome Style Sheets ඒ වගේම නමේම තියන විදියට 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 

sample

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

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

sass2

 

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

sass --watch stylesheets/sass:stylesheets/css

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

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

*******************************

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s