SCSS atau SASS merupakan singkatan dari Syntactically Awesome Stylesheets yang merupakan preprocessor dari CSS. Ketika menggunakan preprocessor kita dapat memiliki keleluasaan lebih dalam melakukan proses styling seperti pembuatan variabel, nesting, partials, mixins dan lain-lain yang tentu tidak bisa dilakukan oleh CSS biasa.
Perbedaan antara SCSS dan SASS
Terdapat dua cara dalam apabila ingin menggunakan SCSS atau SASS, yaitu:
1. SCSS
Apabila ingin membuat file SCSS, maka kita perlu membuat sebuah file dengan berekstensikan .scss. Dan untuk penulisan sintaks-nya sama seperti CSS native pada umumnya.
.container {
max-width: 576px;
margin: auto;
}
.button {
padding: 10px;
border-radius: 2px;
border: 1px solid black;
}
2. SASS
Kemudian apabila ingin menggunakan SASS, kita perlu membuat file tersebut dengan berekstensikan .sass. Perbedaan antara SCSS dan SASS terletak pada penulisannya. Untuk SCSS menggunakan kurung kurawal seperti CSS pada umumnya, sedangkan untuk SASS menggunakan identasi seperti python dalam penulisannya.
.container
max-width: 576px;
margin: auto;
.button
padding: 10px;
border-radius: 2px;
border: 1px solid black;
Fitur Yang Dimiliki
Berikut ini beberapa fitur dari SCSS/SASS yang dapat kita manfaatkan:
1. Variabel
Apabila ingin membuat sebuah variabel dalam SCSS, kita dengan mudah dapat melakukannya seperti ini:
$red-100: #fee2e2;
$red-200: #fecaca;
$red-300: #fca5a5;
$red-400: #f87171;
Apabila ingin menggunakannya:
button{
background-color: $red-300;
}
Dan perlu diingat dalam membuat variabel, kamu harus membuatnya dengan menggunakan tanda $ kemudian diikuti dengan nama variabel nya lalu ditutup dengan titik koma.
2. Nesting
Kemudian terdapat fitur Nesting, yaitu memungkinkan kita melakukan grouping dalam proses styling. Berikut contoh penggunaan nesting untuk membuat navbar sederhana:
index.html
<nav>
<ul>
<li>
<a href="">Dashboard</a>
</li>
<li>
<a href="">Profile</a>
</li>
</ul>
</nav>Maka apabila menggunakan SCSS didapatkan:
SCSS
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}CSS
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}Terlihat pada file CSS tersebut, kita melakukan proses pemanggilan berulang pada kata kunci nav, sedangkan ketika menggunakan SCSS kita dapat melakukan proses grouping dengan mudah sehingga tidak perlu memanggil kata kunci tersebut. Hal ini menghasilkan kode yang lebih clean dan nyaman dibaca. Perlu diingat ketika menggunakan fitur nesting pastikan elemen children di bawahnya masih dalam satu lingkup yang sama.
3. Partials / Modules
Menganut prinsip Separate of Concern, kita dapat membuat sebuah module atau file SCSS terpisah untuk setiap bagian elemen HTML. Untuk mencapai hal tersebut kita dapat dengan mudah membuat module pada SCSS dengan cara menambahkan tanda underscore lalu diikuti dengan nama file tersebut. Sebagai contoh:
_navbar.scss
// _navbar.scss
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}style.scss
// style.scss
@use "navbar";
.container {
max-width: 576px;
margin: auto;
}Terlihat pada kode di atas apabila kita ingin menggunakan module, kita dapat memanggilnya dengan kata kunci @use, dan pastikan file tersebut masih berada dalam satu folder yang sama. Apabila terdapat perbedaan hierarki pada file tersebut, maka relative path berlaku seperti CSS pada umumnya.
4. Mixins
Mixin memungkinkan kita membuat sebuah block styling yang dapat digunakan secara berulang pada satu elemen dan elemen lainnya. Berikut ini contohnya:
SCSS
@mixin button($theme:red) {
background-color: ($theme);
padding: 2px 10px 2px 10px;
border-radius: 3px;
text-align: center;
font-weight: bold;
border: 1px solid black;
}
.button-info {
@include button('blue');
}
.button-danger{
@include button('red');
}
CSS
.button-info {
background-color: "blue";
padding: 2px 10px 2px 10px;
border-radius: 3px;
text-align: center;
font-weight: bold;
border: 1px solid black;
}
.button-danger {
background-color: "red";
padding: 2px 10px 2px 10px;
border-radius: 3px;
text-align: center;
font-weight: bold;
border: 1px solid black;
}
Terlihat pada kode di atas kita hanya perlu membuat satu block khusus yang memuat segala jenis styling yang akan digunakan, lalu memanggil block tersebut dengan kata kunci @include pada elemen yang ingin diterapkan styling-nya. Hal ini membuat proses development menjadi lebih cepat dan block CSS yang dihasilkan dapat digunakan kembali pada elemen selanjutnya.
Dengan menggunakan mixin kita dapat menyisipkan sebuah parameter, sehingga membuatnya unik satu sama yang lain. Hal ini mirip seperti function dalam bahasa pemrograman pada umumnya.
5. Extended / Inheritance
Sama seperti mixin kita dapat membuat sebuah block khusus yang menyimpan property dan value css yang dapat kita gunakan secara berulang dengan mudah. Namun terdapat perbedaannya, perhatikan kode di bawah:
// Membuat parent yang berisikan property dan value CSS
%button {
padding: 2px 10px 2px 10px;
border-radius: 3px;
text-align: center;
font-weight: bold;
border: 1px solid black;
}
// Digunakan dalam variant button
.button-danger {
@extend %button;
background-color: red;
}
.button-success {
@extend %button;
background-color: green;
}
Perbedaan antara mixin dan sifat pewarisan yaitu, apabila kita menggunakan mixin maka kita perlu membuat sebuah parameter di dalamnya agar menjadikan elemen tersebut dinamis. Sedangkan untuk pewarisan sifat hanya menurunkan property dan value dari block styling tersebut terhadap elemen lainnya tanpa kita dapat menyisipkan parameter di dalamnya.
6. Operator
Apabila ingin menggunakan operator seperti +, -, , math.div(), dan %, maka kita perlu menyisipkan kode seperti di bawah ini:
SCSS
**@use "sass:math";**
.container {
display: flex;
}
article[role="main"] {
width: math.div(600px, 960px) * 100%;
}
aside[role="complementary"] {
width: math.div(300px, 960px) * 100%;
margin-left: auto;
}
SCSS
.container {
display: flex;
}
article[role=main] {
width: 62.5%;
}
aside[role=complementary] {
width: 31.25%;
margin-left: auto;
}
Terlihat pada kode SCSS di atas, kita memanggil salah satu module bawaan dari SCSS yaitu use:math, maka dengan ini bisa menerapkan fungsi matematika dalam proses styling yang akan diterapkan.
Kesimpulan
Mulai tertarik menggunakan preprocessor CSS ini? Tentu saja untuk dapat menggunakannya kita hanya perlu memahami dasar-dasar CSS agar bisa diterapkan pada project yang akan dibangun. Dan kamu perlu memperbanyak latihan agar lebih terbiasa dengan fitur-fitur yang disediakan oleh preprocessor ini.
Apabila kamu tertarik dan ingin belajar lebih lanjut tentang web development, saya merekomendasikan untuk bergabung pada kelas gratis di BuildWithAngga, karena di dalamnya terdapat mentor-mentor berkualitas yang mendukung proses belajar hingga menjadikan kita sebagai developer yang dapat bersaing dalam dunia industri. Semoga beruntung dan sampai jumpa di kelas!
