Belajar SASS Dasar (Mixins dan Include + Content)

4 min readFeb 20, 2019

Mixin adalah blok kode yang memungkinkan kita untuk mengelompokkan deklarasi CSS yang dapat digunakan kembali di seluruh halaman situs yang sedang dibuat.

Apa itu Include?, kita lihat saja nanti.

Dalam penggunaannya Mixins dan Include merupakan satu kesatuan fitur.

Daftar Isi:

Saat membuat deklarasi CSS, kita sangat banyak melakukan perulangan-perulangan yang sangat membosankan. Misal untuk menentukan -webkit dll.

Ex: menampilkan elemen HTML sebagai elemen dengan display Flex.

.row {
    display: -webkit-flex;
    display: flex;
}

Tentunya bukan hanya selector .row saja yang menggunakan properti display seperti ini. Kita akan mengetikan kode seperti ini berulang-ulang. Sangat membosankan.

Membuat Mixins

Membuat mixins sangat simpel, yang harus kita lakukan adalah menggunakan perintah @ mixin diikuti oleh spasi dan nama mixins kita, lalu kita buka dan tutup kurung {}.

@mixin disflex {
    display: -webkit-flex;
    display: flex;
}

Sekarang kita dapat menggunakan deklarasi diatas menggunakan Mixin di dalam kode kita.

Menggunakan Mixins

Untuk memanggil mixins yang sudah dibuat dapat menggunakan @ include diikuti dengan nama mixins.

.row {
    @include disflex;
}

Hasil compilenya akan seperti ini:

.row {
    display: -webkit-flex;
    display: flex;
}

Syntax Mixins digunakan untuk membuat deklarasi, sedangkan Include digunakan untuk memanggil Mixins tersebut.

Mengirim Nilai Argumen

Selain penggunaan diatas, mixins memungkinkan kita untuk mengirim argumen. Manfaatnya sangat memudahkan kita.

@mixin borderr($rad) {
  -webkit-border-radius: $rad;
  -moz-border-radius: $rad;
  border-radius: $rad;
}
.box {
   @include borderr(10px);
}

Akan mengasilkan kode CSS seperti:

.box {
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  border-radius: 14px;
}

Masih dalam contoh kasus -webkit kita dapat dengan mudah mengatur border-radius untuk semua browser.

Mengirim Banyak Nilai Argumen dan Menetapkan Nilai Default

Tidak hanya satu argument, SASS memungkinkan kita membuat multi-argumen yang dapat diset nilai default-nya.

@mixin posisi($top:auto, $right:auto, $bottom:auto, $left:auto) {
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}
.objek {
  @include posisi(10px, 10px, 5px, 15px);
}

Hasil compile CSS:

.objek {
  top: 10px;
  right: 10px;
  bottom: 5px;
  left: 15px;
}

Variable Arguments

Kekurangan dari teknik ini adalah argumennya harus benar, jika kurang makan dianggap default, jika lebih akan error.

Tapi jangan khawatir, di SASS kita bisa mengirim argumen berapapun jumlahnya.

@mixin varArg($values) {    
    @each $var in $values {
        property: #{$var};
    }
}
div{
  @include varArg(2px 4px 6px 10px);
}

Kita bisa menggunakan @each untuk melakukan ini, penggunaannya sama seperti fungsi looping pada bahasa pemrograman, nanti insha Allah dibahas lebih lanjut.

div {
  property: 2px;
  property: 4px;
  property: 6px;
  property: 10px;
  property: 11px;
}

Hasil compile-nya akan seperti ini.

Cuma segini? engga dong, kita juga bisa mengirim argumen kedalam variabel dari sebuah variabel.

$style1: 100%, 70px, #fo6d06;
$style2: (background: #bada55, width: 100%, height: 100px);@mixin box($width, $height, $background) {
    width: $width;
    height: $height;
    background-color: $background;
}
.foo {
    @include box($style1...);
}
.shalala {
    @include box($style2...);
}

Akan di compile seperti berikut:

.foo {
  width: 100%;
  height: 70px;
  background-color: #fo6d06;
}
.shalala {
  width: 100%;
  height: 100px;
  background-color: #bada55;
}

Passing Blok Konten kedalam Mixins

Rilisan SASS 3.2 menambahkan syntax @content, yang memungkinkan kita untuk meneruskan blok styles ke dalam sebuah mixins.

Pada beberapa library CSS menggunakan syntax ini untuk mengirim blok style kedalam media query.

@mixin layarhp() {
    @media only screen and (max-width: 320px) {
        @content;
    }
}
@include layarhp{
  .element {
    width: 80%;
  }
}//Hasil Compile
@media only screen and (max-width: 320px) {
  .element {
    width: 80%;
  }
}

Tentunya akan sangat berguna ketika kita membangun grid system yang responsive.

Keyframe

Terkadang kita harus bertemu dengan project yang diharuskan untuk membuat animasi dengan CSS (ketika JS sudah dianggap berat).

Dengan bantuan SASS kita dapat melakukannya dengan sederhana.

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  }
}@include keyframes(fadeIn) {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}

Hasil Compile CSS:

@-webkit-keyframes fadein {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}
@-moz-keyframes fadein {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}
@keyframes fadein {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}

Kita dapat membuat behavior fadein dengan sebuat variabel, ex: $type: fadeout;, maka mixins kita untuk keyframe akan lebih dinamis.

Kesimpulan

Diantara beberapa fungsi basic SASS, mungkin mixins inilah yang paling luas cakupannya.

Contoh diatas hanya sebagian kecil saja, silahkan explore lebih jauh lagi. Mungkin saja ada solusi yang dapat mixins pecahkan untuk masalah ditempat kerja kita.

Mohon maaf jika dari penulisan sangat kurang baik, saya sendiri merasa kesulitan untuk menjelaskan fungsi-fungsi bahasa pemrograman dalam bentuk artikel.

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.