Sass (Syntactically Awesome Style Sheets) adalah preprocessor CSS yang digunakan untuk membuat kode CSS yang lebih efisien, mudah dipelihara, dan mudah dibaca. Sass memungkinkan developer untuk menulis kode CSS dengan sintaks yang lebih mudah dipahami dan memiliki fitur tambahan yang tidak tersedia di CSS standar.
Sass pertama kali diperkenalkan pada tahun 2006 oleh Hampton Catlin, dan sejak itu telah menjadi salah satu preprocessor CSS yang paling populer. Sass dapat digunakan dengan berbagai bahasa pemrograman, termasuk HTML, JavaScript, dan Ruby.
Salah satu fitur utama dari Sass adalah penggunaan variabel. Variabel memungkinkan developer untuk menyimpan nilai tertentu dan menggunakan nilai tersebut di berbagai bagian kode. Hal ini memungkinkan developer untuk membuat kode CSS yang lebih mudah dipelihara dan mengubah nilai tertentu dengan mudah.
Contoh penggunaan variabel di Sass:
$primary-color: #2196F3;
$secondary-color: #f44336;
.btn-primary {
background-color: $primary-color;
color: #fff;
}
.btn-secondary {
background-color: $secondary-color;
color: #fff;
}
Selain variabel, Sass juga menyediakan fitur seperti nested rules, mixins, dan inheritance. Nested rules memungkinkan developer untuk menuliskan kode CSS dengan struktur yang lebih terorganisir, seperti pada contoh berikut:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
li {
display: inline-block;
margin-left: 10px;
a {
display: block;
padding: 5px;
color: #333;
text-decoration: none;
}
}
}
}
Mixins memungkinkan developer untuk membuat kumpulan aturan CSS yang dapat digunakan di beberapa bagian kode. Contoh penggunaan mixins di Sass:
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
.btn {
@include border-radius(5px);
}
Inheritance memungkinkan developer untuk menurunkan aturan CSS dari satu selektor ke selektor lainnya, seperti pada contoh berikut:
.button {
padding: 10px;
font-size: 16px;
}
.btn-primary {
@extend .button;
background-color: #2196F3;
color: #fff;
}
.btn-secondary {
@extend .button;
background-color: #f44336;
color: #fff;
}
Sass dapat dikompilasi menjadi kode CSS biasa yang dapat digunakan di halaman web. Sass juga dapat digunakan dengan berbagai tools dan framework web seperti Ruby on Rails, AngularJS, dan Laravel.
Dalam kesimpulan, Sass adalah preprocessor CSS yang populer dan digunakan dalam pengembangan web modern. Sass menyediakan banyak fitur yang memudahkan developer untuk menulis kode CSS yang efisien, mudah dipelihara, dan mudah dibaca. Dengan menggunakan Sass, developer dapat menghemat waktu dan usaha dalam membuat halaman web yang profesional dan responsif.
