Site Loader
  Chat

SCSS dan SASS singkatan dari Syntactically Awesome StyleSheets merupakan salah satu teknik untuk mendesign situs website. Jika sebelumnya membuat tampilan website lebih menarik menggunakan CSS, maka perlu anda menggunakan SCSS agar lebih maksimal dalam membuat design website.

Penulisan menggunakan SCSS lebih menarik dan bervariatif, dengan menggunakan SCSS seorang developers dapat membuat variable tetap yang bisa di panggil berulang-ulang tanpa menuliskan kode yang sama.

Perlu di ketahui SCSS maupun SASS merupakan bukan alternatif pengganti CSS namun sebagai dukungan CSS. Hasil file SCSS nanti juga akan di export menjadi file CSS.

Keunggulan menggunakan SCSS maupun SASS

  1. Penulisannya kode lebih rapi dan tersruktur.
  2. Kompatibel di semua jenis browser.
  3. Hasilnya dapat di jadikan file CSS yang bersifat Open source.

 Fitur yang ada di SCSS maupun SASS

1. Variable
Salah satu fitur di dalam SCSS yaitu dapat membuat variable yang dapat di akses di semua atribut CSS. Penulisan variable ini berupa elemen yang ada di dalam CSS, misalnya pewarnaan, ukuran font dan lainnya.
2. Import
Fitur ke-dua yang terdapat di SCSS yaitu import. Fungsi import ini yaitu dapat memanggil file SCSS lainnya, sehingga dapat melakukan extends/memanggil Style lainnya. contoh penggunaan extends yaitu ketika memgimport file bootstrap, dan membuat class tertentu, maka di dalam class itu dapat mengambil elemen dari class bootstrap.
3. Nested
Nested digunakan untuk membuat style yang di susun secara berurutan untuk elemen terntentu. Contohnya ketika memberikan style pada class tertentu dan class itu hanya berlaku ketika class di atasnya telah di tentukan. 

Contoh penulisan SCSS  

$font-atas : font-size : 34px;
$color-favorit : pink;
.wrap{font-size: $font-atas;color: $color-favorit}

.main { @extend .wrap }

Contoh kode dapat di lihat di https://github.com/didikprabowo/build-template-flex-from-scss-bootsrap

Perbedaan SCSS dan SASS 

Kedua jenis format file SCSS dan SASS ini mempunyai tujuan yang sama, yang membedakan yaitu cara penulisannya, namun perbedaan tersebut tidak jauh mencolok, seperti penggunaan titik koma yang hanya berlaku untuk SCSS saja. Agar penggunaan lebih maksimal silahkan pilih satu satu saja, namun ketika ingin mengetahui lebih lanjut pelajari keduanya.

Cara menggunakan SCSS

Salah satu tools pendukung SCSS dapat menggunakan tools koala, anda tidak perlu melakukan perintah di CLI, namun ketika anda ingin belajar perintah-perintah yang di pakai saya merokemendasikan menggunakan CLI.     

Post Author: Didik Prabowo

Seoarang Software enginering, Instruktur terutama di bifang pemrograman berbasis website, sekaligus admin di situs didikprabowo.com.

Leave a Reply

Your email address will not be published. Required fields are marked *

PRODUK UNGGULAN

Anda tertarik ?

Subscribe to Blog via Email

Dapat kan informasi terbaru dengan memasukan email di kolom ini