SCSS / SASS

14 Mei 2025

SASS (Syntactically Awesome Stylesheets) dan SCSS adalah CSS preprocessor yang memberikan fitur tambahan seperti variabel, nesting, mixin, inheritance, dan modularisasi untuk menulis kode CSS yang lebih rapi, efisien, dan terstruktur.

1. Perbedaan SASS dan SCSS

• SASS menggunakan indentasi tanpa tanda kurung kurawal {} dan titik koma ;
• SCSS lebih mirip CSS biasa dan mendukung tanda {} dan ;
• File SASS berekstensi .sass dan SCSS berekstensi .scss

2. Contoh Penulisan

SCSS:

$primary-color: blue;

body {
  background-color: $primary-color;
  font-size: 16px;
}

SASS:

$primary-color: blue

body
  background-color: $primary-color
  font-size: 16px

3. Fitur SCSS

• Variabel untuk menyimpan warna, font, ukuran, dll.
• Nesting agar penulisan lebih rapi dan mengikuti struktur HTML.
• Mixin untuk mendefinisikan blok gaya yang bisa digunakan ulang.
• Inheritance menggunakan @extend untuk mewarisi gaya dari selector lain.
• Modularisasi menggunakan @import untuk memecah file SCSS.

Contoh Variabel:

$main-color: #333;

h1 {
  color: $main-color;
}

Contoh Mixin:

@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include center;
}

4. SCSS di Jekyll

Dalam proyek Jekyll, file SCSS biasanya disimpan di folder _sass atau assets/css. Kamu bisa mengimpor file SCSS ke dalam main.scss dan Jekyll akan mengompilasinya secara otomatis saat build.

5. Kesimpulan

SCSS dan SASS memberikan banyak kemudahan dan kekuatan dalam menulis CSS. SCSS lebih familiar bagi pemula karena sintaksnya mirip dengan CSS. Dengan menggunakan SCSS, proyek web menjadi lebih bersih, modular, dan mudah dikelola.