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 menggunakan 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 variabel dalam SCSS dapat dilakukan dengan cara seperti ini:
$red-100: #fee2e2;
$red-200: #fecaca;
$red-300: #fca5a5;
$red-400: #f87171;
Kemudian penggunaannya:
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 dapat dengan melakukan proses grouping sehingga tidak perlu memanggil kata kunci tersebut. Tentu saja hal ini menghasilkan kode yang 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 membuat module pada SCSS, perlu 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 ingin menggunakan module, maka 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;
}
Pada kode di atas hanya perlu membuat satu block khusus yang memuat segala proses styling yang akan digunakan, lalu memanggil block tersebut dengan kata kunci @include pada elemen yang ingin diterapkan.
Dengan menggunakan mixin memungkinkan kita 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 digunakan secara berulang. Namun terdapat perbedaannya dalam penggunaannya, perhatikan kode berikut:
// 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 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 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!
