Get to know SASS much easier with live compiler. (in Bahasa)

Sass adalah kepanjangan dari Syntactically Awesome Style Sheets, merupakan tool yang sangat powerfull untuk membantu para developer menulis kode css yang lebih bersih, rapi dan meminimalisir repetisi.

Perlu di ketahui Sass merupakan preprocessor css, bukan pengganti css. Biasanya kita langsung menghubungkan file css dengan tag link di html. Namun dengan menggunakan preprocessor, dibutuhkan satu langkah tambahan, yaitu kita harus membuat file pre processornya terlebih dahulu (.sass atau .scss) , jadi yang akan terhubung ke dalam file html tetap file cssnya, tapi yang kalian edit nanti adalah file dengan extension .sass ataupun .scss-nya. File tersebut nantinya akan di kompilasi / diterjemahkan dengan kompiler menjadi file css.

Kenapa kita harus mempelajari SASS ?

Di dalam css tidak ada variable, function, dan modularisasi. Kita juga tidak dapat melakukan operasi dan logika pemrograman, sehingga repetisi code akan sangat sering dijumpai, sehingga pengelolaannya akan jauh lebih rumit. Dengan menggunakan css preprocessor ini akan mempermudah penulisan dan pengelolaan file css berskala besar, banyak perusahaan besar yang menggunakan tool ini untuk mengelola css yang mereka punya. Di dalam Sass terdapat banyak builtin function yang bisa kita gunakan, bahkan kita dapat membuat function sendiri. Selain itu, framework css favorit seperti Bootsrap dan Materialize dibangun menggunakan Sass, keduanya menyediakan fasilitas untuk memodifikasi framework tersebut, menarik bukan ?

Sass dan Scss

kita dapat memilih untuk menggunakan file ber-extension .sass ataupun .scss, keduanya memiliki penulisan yang berbeda, namun ketika dicompile akan menghasilkan file css yang sama. Disini kita akan menggunakan .scss.

Perbedaan syntax .sass dan .scss

Live Sass Compiler (vscode extension)

ada berbagai macam cara menggunakan SASS, kita dapat menggunakan aplikasi, command line, dan yang paling mudah yaitu dengan menggunakan extension yang terdapat pada Editor VScode. Kita hanya perlu memasang (install) extension ini.

Live Sass Compiler — Extension di vscode

Agar file css kita tertata dengan baik, sebaiknya kita mengelompokan file css dan scss-nya secara terpisah. Hal pertama yan gkita lakukan, kita dapat membuat folder scss-nya saja, sedangkan folder css-nya akan dibuatkan oleh compiler. Tapi sebelum itu, kita harus mengatur compiler extensionnya terlebih dahulu. Kita dapat mengaturnya dibagian settings vscode, lalu pilih bagian Extensions — live sass compile config. Kemudian klik Edit in settings.json pada bagian Formats.

Edit file json pada bagian "savePath": null (line 17) menjadi "savePath": "css" , kemudian save file tersebut.

dengan begitu saat kita membuat file .scss, compiler akan menyimpan file css-nya di dalam sebuah folder bernama css . Agar file css-nya otomatis tergenerate kita harus mengaktifkan compiler dengan menekan tombol watch sass yang berada di bagian kanan status bar vscode, hingga berubah menjadi watching . Compiler akan bekerja setiap kali kita menyimpan file .scss yang sedang dibuat.

tombol untuk mengaktifkan live sass compiler

tombol akan berubah menjadi watching dan memberikan status compilernya pada bagian output.

contoh rooting folder yang dihasilkan.

Syntax Dasar Sass

Nesting

Di dalam Sass, kita dapat menyimpan selector di dalam selector yang lainnya. sehingga penulisan akan lebih tertata.

.main {
  background-color: black;
  h1 {
   color: white;
  }
  p {
   color: grey;
  }
}

maka hasil compile-nya di dalam file css adalah sebagai berikut:

.main { background-color: black; }
.main h1 { color: white; }
.main p { color: grey; }

kita juga dapat mendaftarkan selector yang telah kita buat sebelumnya. Terdapat penggunaan karakter & yang dikenal sebagai parent selector yang mentarget element parent pada saat kita melakukan nesting. Karakter ini dapat digunakan untuk menambahkan pseudoclass seperti hover, active, link, visited, dsb.

.main {
  background-color: black;
  &:hover { background-color: salmon; } // => .main:hover { }
}

selain itu di dalam Sass kita dapat mengimplementasikan penggunaan karakter & ini seperti template literal di bahasa pemrograman JavaScript, dengan menuliskan syntaxnya sebagai berikut :

.main {
   #{&}-heading { }    // => .main .main-heading
   #{&}-paragraph { }  // => .main .main-paragraph
}

@extend

@extend dapat digunakan bersamaan dengan selector yang telah didefinisikan stylenya untuk dipanggil didalam selector lainnya.

a {
  color: rgb(255,212,84);
  display: list-item;
  text-decoration: none;
}
button {
  @extend a;
}

maka hasil compilenya akan berbentuk seperti ini:

a, button {
  color: #ffd454;
  display: list-item;
  text-decoration: none;
}

Variabel

Salah satu fitur terbaik Sass adalah adanya variable, ini dapat membuat kode style yang kita buat tetap DRY. Pengaturan warna, layout, bahkan font-family dengan menggunakan variabel akan sangat mempermudah kita menata style yang diinginkan dengan tema tertentu.

format penulisan variable didalam Sass:
$ + nama variabel + : + value

// VARIABLES
$brand-color: rgb(98,150,90);
$link-color: rgb(66,134,244);
$white-color: rgb(255,255,255);
.main-container {
  background-color: $white-color;
}

maka css yang akan terbentuk adalah:

.main-container {
  background-color: #ffffff;
}

beberapa perilaku yang harus kita ketahui dari variable Sass ini adalah, penulisan variable dengan menggunaan karakter - (dash) dan _ (underscore) di dalam Sass akan dianggap sama, &brand-color dan &brand_color adalah sebuah variable yang sama . Variable di dalam Sass juga memiliki scope, sama hal-nya dengan sifat variable let yang terdapat di JavaScript. Jika variable tersebut di deklarasikan di luar sebuah selector element, maka variable tersebut akan bersifat global, sedangkan sebaliknya akan bersifat local.

$primary-color: white;   // => global variabel
$secondary-color: black; // => global variabel
.main-container { 
  background-color: $primary-color;
  $text-color: beige; // => local variabel
  color: $text-color
}

Mixin

Saat membuat deklarasi CSS, kita sangat banyak melakukan penulisan kode yang berulang-ulang. Di dalam Sass kumpulan beberapa baris style CSS yang sudah didefinisikan dapat digunakan berulang-ulang dimanapun dan kapanpun. Konsep Mixin ini mirip dengan function di JavaScript.

format penulisan dan penggunaan Mixin didalam Sass:

/*penulisan atau deklarasi mixin, keyword : @mixin */
@mixin nama_mixin () {
   // kumpulan style
}
/*pemanggilannya menggunakan keyword : @include */
.selector {
   @include nama_mixin();
}

Arguments pada Mixin

seperti function di JavaScript, mixin juga dapat menerima argument. Kita juga dapat membuat default value parameternya. Ini akan sangat berguna seperti pada saat kita ingin mengatur elemen-elemen HTML dengan menggunakan display flex, pastinya kita membutuhkan beberapa style yang sama untuk setiap elemen tersebut.

@mixin flex-box($direction: row, $space: center) {
   display: flex;
   justify-content: $space;
   align-items: center;
   flex-direction: $direction
}

dengan begitu kita hanya perlu memanggil mixin yang telah kita buat untuk diimplementasikan terhadap beberapa elemen.

.main-container {
    @include flex-box(row-reverse, space-around)
}
.body {
    @include flex-box()
}

Fitur Lainnya

tidak hanya itu, masih banyak lagi fitur Sass yang dapat kita gunakan seperti :

• Helper Functions , contohnyalighten ataudarken yang dapat digunakan untuk mengatur terang gelapnya warna.
• Partial Files untuk menyertakan mixin yang dapat digunakan kembali di seluruh file yang kita punya.
• Maps yang dapat menyimpan beberapa nilai sekaligus dalam sebuah nama atau variable (seperti Object di JavaScript).
• Loops dan Conditions yang dikenal sebagai Flow Control di dalam Sass.
• dan masih banyak lagi …