Perbedaan SCSS dan CSS
Sementara itu , SCSS (Sassy CSS) adalah salah satu sintaks dari SASS (Syntactically Awesome Style Sheets), yaitu sebuah preprocessor CSS. SCSS merupakan superset dari CSS, artinya semua kode CSS valid juga valid di SCSS. Namun, SCSS menawarkan fitur tambahan yang tidak dimiliki CSS standar, seperti variabel, nesting, mixins, loops, dan fungsi yang membuat penulisan kode menjadi lebih efisien dan mudah dikelola. SCSS tidak langsung dibaca oleh browser. Kode SCSS harus dikompilasi terlebih dahulu menjadi CSS biasa agar bisa dijalankan di browser. Dengan kata lain, SCSS adalah alat bantu untuk menulis CSS dengan cara yang lebih modern dan terstruktur
Contoh Perbedaan Penulisan
CSS:
body{SCSS:
width: 800px;
color: #ffffff;
}
body content{
width:750px;
background:#ffffff;
}$color: #ffffff;
$width: 800px;body {
width: $width;
color: $color;
.content {
width: 750px;
background: $color;
}
}
Pada contoh di atas, SCSS menggunakan variabel $color dan $width, serta nesting untuk menulis kode yang lebih terstruktur dan mudah diubah