Apa Itu SASS, Dan Apa Perbedaan Dengan CSS

Bagi seorang developer pasti ingin ada variable untuk menyimpan warna misalnya atau nilai tertentu agar bisa dipergunakan kembali jika diperlukan. Atau mungkin ingin adanya kemampuan untuk membuat sebuah fungsi untuk menghemat waktu dalam penulis beberapa kode yang banyak dalam CSS.

Selama ini kita mengenal CSS dan merasa nyaman menggunakannya, CSS sudah kita anggap sebagai pasangan hidup dari HTML. Sebagaimana kita tahu bahwa fungsi CSS adalah membuat tampilan website kita kelihatan elegan, cantik dan sexy. Struktur bahasanya yang sederhana, mudah dipahami namun memberikan pengaruh yang sangat besar terhadap tampilan HTML. Namun jika dilihat dari sisi seorang Developer kesederhanaan CSS ini membuat penulisan kodenya tidak efektif. Ketika Anda mengharuskan mengerjakan sebuah proyek yang sebelumnya pernah dikerjakan oleh orang lain dan Anda melihat terdapat baris kode yang berantakan atau amburadulnya struktur kode tersebut, Anda akan tercengang dan bingung dan ingin membuatnya sendiri dari awal.

Untuk menyelesaikan permasalahan di atas, muncullah CSS Preprocessor. CSS Preprocessor memberikan kemampuan untuk membuat variabel, Fungsi, dan penulisan CSS yang lebih terstruktur dan pastinya membuat proses Development lebih cepat dan efisien.

Saat ini ada beberapa CSS preprocessor yang paling sering digunakan, diantaranya Less.js dan SASS. Keduanya memeliki struktur kode yang sama jadi jika Anda telah memahami salah satunya, Anda dapat memahami CSS preprocessor yang lainnya.Namun kali ini saya hanya akan menjelaskan salah satu CSS Preprocessor saja, yakni SASS. Seperti apa SASS itu? silahkan simak ulasannya dibawah ini :

Apa itu Sass?

SASS bukan merupakan pengganti dari CSS, namun SASS ini adalah tools yang membuat CSS menjadi lebih mudah. Sass (Syntactically Awesome Stylesheets) adalah sebuah pengembangan dari CSS3 dengan menambahkan nested rules, variables, mixins, selector inheritance, dan banyak lagi. dia menerjemahkan css dengan struktur yang lebih baik.

Apa kelebihan Sass?

Manfaat dari adanya variable ini yaitu kode kita akan lebih bersih dan meminimalisir redudansi kode. SASS hadir untuk mempermudah designer ataupun developer dalam mendesain sebuah website. Istilahnya, dengan SASS ini kita bisa menggunakan fitur-fitur yang biasanya ada di bahasa pemrograman (seperti variable) di CSS. CSS yang dihasilkan akan rapi dan mudah di mengerti, Otomatis berjalan dengan baik di setiap browser, dab hasil output CSS akan lebih terstruktur.

Variable

Kita bisa mendivinisikan sebuah variable dan memenggilnya pada baris dimanapun kita butuhkan, juga kita bisa menggunakan perhitungan matematika sederhana. Apabila Anda sudah pernah membuat kode program sebelumnya, pastinya akan memahami apa itu variable. Dengan SASS, kita bisa menambahkan variable pada kode CSS.

Contohnya, ketika ingin menyimpan nama font yang kita gunakan di satu variabel, atau menyimpan warna tulisan di dalam satu variabel. Nantinya akan bisa dipanggil langsung didalem kode yang lainnya.

Kita bisa mendivinisikan sebuah variable dan memenggilnya pada baris dimanapun kita butuhkan, juga kita bisa menggunakan perhitungan matematika sederhana. 

/* .scss */
$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

Ketika di compile maka akan menjadi 

/* CSS */

.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

Mixin

Mixin lebih bagus dari Variable yang memungkinkan kita menggunakan kembali potongan kode css. misalkan jika kita banyak menggunakan rounded corner, maka tinggal dibuatkan sebuah mixin dan bisa kita panggil/pakai berulang.

/* .scss */

@mixin table-base {
  th {
    text-align: center;
    font-weight: bold;
  }
  td, th {padding: 2px}
}

@mixin left($dist) {
  float: left;
  margin-left: $dist;
}

#data {
  @include left(10px);
  @include table-base;
}

ketika di compile maka akan menjadi 

/* CSS */

#data {
  float: left;
  margin-left: 10px;
}
#data th {
  text-align: center;
  font-weight: bold;
}
#data td, #data th {
  padding: 2px;
}

Perbedaan SASS dengan SCSS

Perbedaan mendasar sebenarnya hanya dari cara menulisnya. Untuk SASS, kita tidak memakai kurung kurawal dan titik koma, sedangkan SCSS hampir mirip dengan CSS, menggunakan kuurung kurawal dan titik koma.

SASS :

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
color: $primary-color

CSS :

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Saya pribadi sih lebih suka menggunakan css, karena mungkin lebih terbiasa. Namun tidak menutup kemungkinan akan menyukai sass. Penjelasan mengenai SASS cukup sampai disini, dan untuk bagaimana cara penggunaan SASS atau proses instalasinya, akan saya jelaskan pada artikel lainnya. Salam.

Share this

Unknown