profile picture

Home

SCSS dan SASS

07 May 2025 -

penjelasan tentang SCSS dan SASS

SCSS dan SASS adalah preprocessor CSS—alat bantu yang memperluas fungsionalitas CSS dan membuat penulisan kode CSS lebih efisien, terstruktur, dan mudah dikelola. Keduanya merupakan bagian dari Sass (Syntactically Awesome Stylesheets), tetapi memiliki perbedaan utama dalam sintaksis.

Apa itu SASS?

SASS adalah singkatan dari Syntactically Awesome Stylesheets. Ini adalah preprocessor CSS yang menyediakan fitur tambahan seperti:

Contoh sintaks SASS (indentasi, tanpa tanda kurung atau titik koma):

$primary-color: #3498db

body
  background: $primary-color

nav
  ul
    margin: 0
    padding: 0
  li
    display: inline-block

Apa itu SCSS?

SCSS adalah versi SASS yang lebih modern dan menggunakan sintaks seperti CSS biasa. Ini adalah bentuk superset dari CSS, artinya kode CSS yang valid juga merupakan kode SCSS yang valid.

Contoh sintaks SCSS (menggunakan {} dan ; seperti CSS):

$primary-color: #3498db;

body {
  background: $primary-color;
}

nav {
  ul {
    margin: 0;
    padding: 0;
  }

  li {
    display: inline-block;
  }
}

Kelebihan SCSS/SASS dibanding CSS biasa:

Kesimpulan