Belajar SASS Dasar (Operasi Matematika)

SASS mendukung banyak operasi matematik yang dapat membantu kita melakukan operasi dalam membuat file CSS.

Daftar Isi:

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

Operator matematika standar seperti +, -, *, /, dan %. Dalam contoh kita, kita akan melakukan operasi matematika sederhana untuk menghitung lebar untuk aside & article.

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}
aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

Dan akan menghasilkan kode CSS seperti ini:

article[role=main] {
  float: left;
  width: 62.5%;
}
aside[role=complementary] {
  float: right;
  width: 31.25%;
}

Tentu sangat membantu ketika kita memiliki variabel yang berisi number.

$lebar: 600px;
article[role="main"] {
  float: left;
  width: $lebar / 960px * 100%;
}
// output
article[role=main] {
  float: left;
  width: 62.5%;
}

Tentu sangat menyenagkan ketika kode CSS kita memiliki sifat yang dinamis, sehingga dapat dengan mudah di maintain ataupun di scaleup.

Operator Aritmatika

Mirip dengan sintaks CSS standar, Anda dapat menambah, mengurangi, mengalikan dan membagi nilai, tanpa harus menggunakan fungsi calc () dari sintaks CSS klasik.

Yang tetap kita perhatikan adalah operasi dengan satuan yang tidak tepat akan menghasilkan error.

Penjumlahan

article[role="main"] {
  font-size: 10px + 2em; // ERROR
  font-size: 10px + 2; // 12px
  font-size: 10px + 2px; // 12px
}

Pastikan kedua nilai diberikan dalam satuan yang tepat.

Pengurangan

Operator pengurangan bekerja dengan cara yang sama dengan penambahan.

article[role="main"] {
  font-size: 10px - 2%; // ERROR
  font-size: 10% - 6%; // 4%
  font-size: 10px - 6px; // 4px
}

Perkalian

Tada bintang digunakan untuk perkalian. Sama seperti dengan calc(a * b) pada CSS standar.

article[role="main"] {
  width: 10px * 10px; // ERROR
  width: 10px * 10; // 100px
  width: 1 * 5 * 10px; //  50px
  width: 10 * (10px + 5px); // 150px
  width: 5px + (10px / 2) * 3; // 20px
}

Pembagian

Operasi pembagian pada SASS sedikit agak rumit. Karena dalam CSS standar, simbol pembagian dikhususkan untuk digunakan bersama dengan beberapa properti pemendek lainnya.

Misalnya, font: 24 / 32px; mendefinisikan font dengan ukuran 25px dan tinggi baris 32px. Tetapi SCSS mengklaim kompatibel dengan CSS standar.

p {font: 16px / 24px Arial, sans-serif} tanda slash / pada CSS standar digunakan untuk beberapa property pemendek.

Lalu bagaimana SASS melakukan pembagian?

$m-kiri: 25px;
$m-kanan: 30px;
p {
  top: 16px / 24px; // Output as classic CSS
  top: (16px / 24px); // Does division (when parentheses are added)
  top: #{$m-kiri} / #{$m-kanan}; // Uses interpollatin, output as CSS
  top: $m-kiri / $m-kanan; // Does division
  top: random(4) / 5; // Does division (when paired with function)
  top: 2px/ 24px + 3px; // Does division (when part of arithmetic)
}

Jika ingin membagi dua nilai, cukup tambahkan tanda kurung di sekitar operasi pembagian. Kalau tidak, divisi hanya akan bekerja dalam kombinasi dengan beberapa operator atau fungsi lainnya.

Operator Perbandingan

Bagaimana operator perbandingan dapat diaplikasikan?

Kita bisa mencoba menulis @mixin yang akan memilih ukuran padding jika lebih besar dari margin:

@mixin spacing($padding, $margin){
 @if ($padding > $margin){
  padding: $padding;
 } @else {
  padding: $margin;
 }
}
.container {
 @include spacing(10px, 20px);
}

Hasil compile CSS:

.container {padding: 20px;}

Operator Logical

Contoh penggunaan:

@mixin bgcolor($padding, $margin){
 @if (($padding < $margin) and ($padding >= 35px)){
  background-color: green;
 } @else {
  background-color: red;
 }
}
.colorme {
 @include bgcolor(10px, 20px);
}

Hasilnya adalah:

.colorme {background-color: red;}

Strings

Dalam beberapa kasus, kita diharuskan untuk menambahkan string dengan nilai tertentu.

Misal: p {font: 50px Ari + “al”;}

Maka akan menghasilkan kode CSS seperti ini:

p {
  font: 50px Arial;
}

Kesimpulan

Operasi matematika pada SASS akan sangat powerfull juka di kombinasikan dengan variabel ataupun mixins.

Untuk membuat fungsi-fungsi yang dinamis membutuhkan usaha untuk explorasi. Namun dampaknya akan baik untuk project kita kedepannya.

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.