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 memudahkan designer atau developer membuat sebuah website. Dengan menggunakan SASS sendiri memudahkan kita dalam menulis CSS seperti penggunaan variabel, nesting, mixins ,selector inheritance dll. Keunggulan lainnya seperti CSS yang lebih tersutruktur, rapi, mudah dipahami, dan yang paling penting dapat berjalan baik di semua browser. SASS hadir untuk mempermudah designer ataupun developer dalam mendesain sebuah website. Istilahnya, dengan SASS ini kita bisa 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 adalah versi npm teman teman. kalo belum di install silahkan install terlebih dahulu NPM nya.

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

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

maka akan muncul versi sass kita. setelah kita berhasil menginstall sass, mari kita praktekan bagaimana cara membuat nya.

pertama tama kalian bisa buat 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 dalam variabel, dan variabel tersebut bisa di pakai berulang ulang teman teman, setelah kita buat file style.scss maka secara otomatis file tersebut akan di rubah ke dalam file style.css yang bisa kita gunakan seperti file css biasa. seperti ini .

dan bisa kita panggil di html nya.

dan coba teman teman jalankan di webroser nya.

sekian Tutorial Install Sass via NPM, semoga bermanfaat yah teman teman.

The post Tutorial Install Sass via NPM appeared first on Kursus Website Terbaik.