Belajar Sass

4 min readDec 1, 2020

Sumber: wikipedia.com

Pada artikel ini, kita akan mempelajari dasar-dasar Sass yang akan memudahkan kita dalam menulis CSS.

Artikel ini dibuat berdasarkan tutorial dari Progate. Untuk teman-teman yang ingin mempelajari Sass di Progate bisa membuka https://progate.com/languages/sass.

Apa Itu Sass?

Sass adalah bahasa scripting yang akan membuat penulisan CSS lebih mudah dan efisien. Penulisan di Sass lebih singkat dibanding dengan CSS. Dan kodenya dapat digunakan secara berulang.

Ada dua cara untuk menulis Sass, yaitu sintaksis SASS dan sintaksis SCSS. Di artikel ini, kita menggunakan sintaksis SCSS, yang mana adalah sintaksis yang lebih umum. File ekstensinya adalah .scss dan bukan .css.

Install Sass

Untuk pengguna Windows, Mac, atau Linux bisa menginstall Sass mengunakan NPM dengan menjalankan:

npm install -g sass

Untuk pengguna Mac OS X atau Linux bisa menginstall Sass mengunakan Homebrew dengan menjalankan:

brew install sass/sass/sass

Setelah kita menginstall Sass, mari kita mulai belajar menggunakannya.

Struktur Nesting (Sarang)

Sass memungkinkan kita untuk nesting (menyarang) selector pada selector lain. Jadi kita tidak perlu untuk menulis selector yang sama berulang kali. Contoh bisa dilihat dibawah.

.menu{
 width: 100%; ul{
  list-style-type: none;
  
  li{
    padding: 15px;
    color: #fff;
  }
 }
}

Kelebihan struktur nesting lainnya adalah ketika kita ingin mengubah nama selector, perubahan yang perlu kita lakukan lebih sedikit daripada menggunakan CSS. Seperti contoh diatas, kalau kita ingin mengubah nama class menu, kita cuma perlu melakukan 1 perubahan.

Pseudo Class dan Pseudo Element di Sass

Untuk menggunakan pseudo class (:hover, :active, dll) dan pseudo element (::after, ::before, ::first-letter, dll) di Sass kita bisa menggunakan simbol dan (&). Kalau menggunakan CSS kita akan menggunakan selector li:hover dan p::after, di Sass kita akan menggunakan &:hover dan &:after. Untuk contohnya bisa dilihat dibawah.

li{
  padding: 15px;
  color: #fff;
  
  &:hover{
   color: #000
  }
}p{
  &:after {
   content: "* * *";
  }
}

Menerapkan CSS Ke Element Spesifik

Untuk menerapkan CSS ke element spesifik di Sass, kita dapat menggunakan simbol dan (&). Jika kita ingin mengubah tampilan untuk element p dengan class .second di CSS kita akan menggunakan selector p.second, di Sass kita akan menggunakan &.second. Untuk contohnya dapat dilihat dibawah.

p{
 &.second{
  color: red;  
 }
}

Kode diatas akan mengubah warna text di element p dengan class second.

Variable

Contoh mendefinisikan dan menggunakan variable di Sass dapat dilihat dibawah.

$primary-color: #6200EE;
h1{
  color: $primary-color;
}
p{
  color: $primary-color;
}

Mixin

Selanjutnya kita akan belajar mixin, fitur yang akan sangat berguna di Sass. Mixin adalah function untuk menggabungkan baris-baris code dan menggunakannya kembali. Jadi kita tidak perlu menulis code yang sama berulang kali dan dapat mengurangi duplikasi code. Berikut merupakan contoh penggunaan mixin.

//menggunakan mixin tanpa variable
@mixin card{
  width: 100px;
  padding: 15px;
}
.card-1{
  @include card;
}
.card-2{
  @include card;
}//menggunakan mixin dengan variable
@mixin card-color($color){
  width: 100px;
  padding: 15px;
  background-color: $color;
}
.card-3{
  @include card-color(#6200EE);
}

Modul

Sass menyediakan banyak modul yang berisi fungsi-fungsi yang berguna, seperti color, list, map, math, dll. Untuk menggunakannya kita bisa memuat modul dengan @use “sass:nama-module”, seperti @use “sass:color”;.

Sebelum sistem modul di Sass diperkenalkan semua fungsi Sass tersedia secara global. Saat artikel ini dibuat, masih banyak fungsi di Sass yang memiliki alias global. Tapi tim Sass tidak menyarankan penggunannya, karena mungkin untuk kedepannya tim Sass akan menhentikan support untuk modul-modul alias tersebut.

Namun ada beberapa fungsi yang hanya tersedia secara global, seperti fungsi if(), rgb(), dan hsl(). Fungsi-fungsi tersebut tidak akan pernah usang dan dapat digunakan secara bebas. Untuk semua global fungsi di Sass dapat dilihat di https://sass-lang.com/documentation/modules#global-functions. Dan untuk contoh penggunaan modul di Sass dapat dilihat dibawah.

@use "sass:color";
@use "sass:math";h1{
  //Membuat warna lebih gelap
  color: color.scale(#6200EE, $lightness: -30%); //Menghasilkan #4500a7;  //Mengembalikan nilai tertinggi dari satu atau lebih angka.
  padding: math.max(5px, 10px, 20px, 15px); //Menghasilkan 20px;
}
h2{
  //Membuat warna lebih terang
  color: color.scale(#6200EE, $lightness: 30%); //Menghasilkan #8f41ff;  //Mengembalikan nilai terendah dari satu atau lebih angka.
  padding: math.min(5px, 10px, 20px, 15px); //Menghasilkan 5px;
}

Import

Untuk melakukan import tambahkan underscore (_) diawal nama file yang akan diimport, seperti _colors.scss. Lalu tambahkan @import nama-file untuk file yang akan melakukan import, seperti @import _colors.scss. Untuk contohnya dapat dilihat dibawah.

file yang akan diimport
_colors.scss
$primary-color: #6200EE;file yang melakukan import
style.scss
@import colors;
//bisa juga @import _colors.scss;h1{
  color: $primary-color;
}

Compile Sass ke CSS

Kita dapat mengcompile file .sass atau .scss kita menjadi .css dengan menjalankan kode dibawah di terminal.

sass source/stylesheets/index.scss build/stylesheets/index.css

Saya rasa cukup sekian artikel belajar dasar Sass ini. Untuk teman-teman yang ingin belajar lebih lanjut mengenai Sass bisa membuka dokumentasinya dan untuk teman-teman yang ingin belajar Sass secara interaktif dapat mempelajarinya di Progate. Terima kasih.