Tutorial Install Sass via NPM

SASS kepanjangan dari Syntactically Awesome StyleSheets,  yaitu preprosessornya css atau sebuah bahasa yang diadopsi dari CSS, namun dengan fitur yang lebih banyak yang dapat mempermudah designer atau developer membangun sebuah laman. Dengan menggunakan SASS sendiri mempermudah kita pada menulis CSS seperti pemakaian variabel, nesting, mixins ,selector inheritance dll. Keunggulan lainnya seperti CSS yang lebih tersutruktur, rapi, gampang dimengerti, dan yang sangat urgen dapat berjalan bagus di segala browser. SASS hadir bagi mempermudah designer ataupun developer pada mendesain sebuah laman. Istilahnya, dengan SASS ini kita dapat menggunakan fitur-fitur yang biasanya ada di bahasa pemrograman (seperti variable) di CSS.

 

sebelum menginstall sass pastikan teman teman telah menginstall NPM di komputer teman teman, coba teman teman buka terminal atau command line, ketikan npm -v bila muncul angka itu yaitu versi npm teman teman. kalo belum di install silahkan install terlebih dahulu NPM nya.

setelah itu teman teman dapat ketikan ini npm install -g sass diterminal atau command line teman teman.

kalo telah coba ketikan ini di command line atau terminanya, sass -v

karenanya akan muncul versi sass kita. setelah kita berhasil menginstall sass, mari kita praktekan bagaimana cara membangun nya.

pertama-tama tama kalian dapat bikin folder dan file yang isinya index.html, style.scss dan style.css.

di terminal atau command line arahkan ke root folder tersebut teman teman.

lalu ketikan ini di terminal sass –watch style.scss:style.css

kita ke style.scss, dan ketikan kode berikut.

// variabel huruf
$font-stack: Helvetica, sans-serif;

// variable angka
$p: 20px;
$m: 10px;

// variabel warna favorit
$fav-yellow: #f1c40f;
$fav-green: #1abc9c;
$fav-red: #e74c3c;
$fav-blue: #3498db;
$fav-grey: #ecf0f1;

*{
margin:0;
padding:0;
}
h1{
font-family: $font-stack;
color: $fav-yellow;
background: $fav-grey;
padding:$p;
margin: $m;
}
h2{
font-family: $font-stack;
color: $fav-green;
background: $fav-grey;
padding:$p;
margin: $m;
}
h3{
font-family: $font-stack;
color: $fav-red;
background: $fav-grey;
padding:$p;
margin: $m;
}
h4{
font-family: $font-stack;
color: $fav-blue;
background: $fav-grey;
padding:$p;
margin: $m;
}

terlihat di atas kita menampung beberapa nilai di pada variabel, dan variabel tersebut dapat di gunakan berulang ulang teman teman, setelah kita bikin file style.scss karenanya secara otomatis file tersebut akan di rubah ke pada file style.css yang dapat kita gunakan seperti file css biasanya. seperti ini .

dan dapat kita panggil di html nya.

dan coba teman teman jalankan di webroser nya.

demikianlah Panduan Install Sass via NPM, semoga bermanfaat yah teman teman.

Sumber https://kursuswebsite.org