Belajar SASS Dasar (Variable dan Tipe Data)

Setelah memahami apa itu SASS dan bagai mana menggunakannya, kita akan berlanjut pengenalan Variable dan Tipe Data.

Daftar Isi:

• Apa itu SASS dan Cara Menggunakannya
• Variables dan Tipe Data
• Nesting
• Partials and Import
• Mixins and Include
• Inheritance
• Operators

Kita bahas satu-satu yak. Sebelumnya, dari sini sampai kedepannya saya akan menggunakan format SCSS ya, kalo ada yang pengen menggunakan format SASS tinggal sesuaikan saja.

Penulisan Variables

SASS memungkinkan kita untuk bekerja dengan variabel. Berbeda dengan variabel CSS yang dimulai dengan tanda double-dash yang mungkin pernah kita lihat sebelumnya.

// Variable CSS
--primarycolor: #9c27b0;
// Variable SASS / SCSS
$primarycolor: #9c27b0;

Pada SASS menggunakan symbol dolar untuk membuat sebuah variable. Kita bisa menyimpan value-value seperti warna, font-face, width dll.

Tipe Data pada SASS

Seperti pada bahasa lain, SASS juga mengenal tipe data untuk masing2 objek data.

$ininumber: 9; // var1
$inicolor: #424bf4; // var2
$inistring: "Sebuah String."; // var3
$inistring: 'Ini juga String." !dedault; // var3 juga
$kosong: null; // var4
$inibool: true; // var5

1. $ininumber: Integer, dapat langsung di tulis 1, 5, 9.1 etc

$line-h: 20;
p {
   line-height: $line-h;
}

2. $inicolor: Mendefinisikan berbagai kode warna

$hexacolor: #333333;
$rgbcolor: rgb(255, 16, 77);
.sidebar {
  color: $hexacolor;
  background: $rgbcolor;
}

3. $inistring: String, didefinisikan dalam tanda kutip tunggal ‘’ atau ganda “”

// SCSS
$name: "artikel";
p.#{$name} {
   color: blue;
}
// Compile to CSS
p.artikel {
   color: blue;
}

4. $kosong: Nulls, menetapkan nilai nol yang merupakan data tidak dikenal, type data ini bisa kita gunakan untuk pengkondisian dll.

if(val==null){
    //statements
}

5. $inibool: Returns true atau false data.

$i-am-true: true;
body {
  @if not $i-am-true {
    background : $hexacolor;
  } @else {
    background : $rgbcolor;
  }
}

Untuk di episode ini kalian cukup paham 5 tipe data ini dulu, sebenernya masih ada lagi, Lists, Mapping, nanti kita bahas dilain artikel ya.

Variable Default

Pada contoh definisi variable diatas $inistring terjadi duplikasi variabel, namun pada string ‘Ini juga String.’ diikuti syntax !default, apa itu?

Jadi gini, kita dapat mengatur nilai default untuk variabel dengan menuliskan syntax !default pada akhir nilai variabel.

Dengan kata lain, nilai akhir variabel $inistring dari contoh ini masih akan menjadi “Sebuah String.”

Assignment kedua ‘Ini juga String.’ Diabaikan, karena nilai default sudah ada.

Memang agak aneh, sepertinya syntax ini masih beta, kalo nanti saya sudah dapat pencerahan baru akan diupdate mungkin di artikel lain.

Akhir kata, jika ada pertanyaan atau apapun terkait tulisan ini, feel free untuk kontak saya melalui sosial media, saya sangat terbuka untuk diskusi jika memang saya mampu menjawab pertanyaanya.