lifelong learner — urip iku urup, currently working on accenture.

SAAS Basic – mixin, inheritances, operator part (2/2)

0
Degananda.com -

SASS adalah superset dari css. Superset berarti fitur-fitur yang tidak ada pada css akan dihadirkan melalui tools SASS ini. output dari sass adalah css. sehingga sass akan melakukan kompilasi file bertipe scss(format sass) menjadi css. Pada ulasan kedua mengenai sass ini akan membahas tiga fitur dasar terahir dari sass. Ketiga fungsi itu adalah mixin, inheritances, dan operator. Secara umum fungsi dari dari ketiga fitur tersebut adalah sebagai berikut

  1. Mixin (@mixin).
    Jika anda pernah membuat fungsi(function()) pada bahasa pemrograman tertentu maka mixin ini memiliki fungsi seperti funciton pada bahasa pemrograman seperti php, phyton, javascript. Namun bedannya, mixin pada sass secara default akan mereturn stylesheet sedangkan function pada bahasa pemrograman dapat secara kita bebas dia bersifat void ataukah melakukan return object tertentu. Mixin dan function sama-sama memiliki parameter yang dapat digunakan untuk pemrosesan.
  2. Inheritances (extends)
    jika anda pernah mempelajari OOP maka inheritances pada sass ini sama fungsinya seperti extend dari class child ke class parent yang mana seluruh parameter dan fungsi(void) dari class parent akan turun ke kelas child. Namun terdapat sedikit perbedaan , inheritances(extend) pada sass yang akan diturunkan adalah stylesheet dari id / class parent. SASS secara official mengkalim fitur inheritances ini merupakan fitur yang paling berguna dalam sass (jika dibandingkan fitur-fitur lainnya).
  3. Operator
    Selayaknya dengan definisi operator, pada sass kita dapat melakukan penjumlahan(+), pengurangan (-), pengkalian(*) ataupun pembagian(/) terhadap suatu nilai (yang berupa angka). Namun sebenarnya SASS juga dapat melakukan logic operator (if) dengan operator “and” ataupun “or” tetapi pembahasan tersebut tidak digolongkan pada “sass basic” kemungkinan akan coba kami bahas pada ulasan lain.

kita akan membahas ketiga fitur diatas satu persatu dengan melakukan coding secara langsung. Namun kami ingatkan kembali bahwa fitur dari sass tidak hanya ini(pada part 1 ataupun part). Tetapi terdapat fitur advanced lainnya yang dapat dipelajari seperti : control directive, interpolasi dan lain sebagainnya.

1. mixin

mixin digunakan untuk membuat fungsi. Penulisan mixin memiliki format seperti berikut ini

@mixin nama-fungsi(parameter){ /* stylesheet */}

contohnya kita akan membuat fungsi untuk menuliskan border radius untuk semua browser. Border radius memiliki penulisan kode css yang berbeda-beda antar browser. Contohnya pada mozilla firefox menggunakan stylesheet “-moz-webkit”.

sementara untuk memanggil fungsi mixin tersebut kita gunakan format

@include nama-fungsi('isi parameter');

perintah diatas kita tuliskan pada class atau div tertentu. sass akan mereplace perintah diatas dengan return dari fungsi mixin sehingga seperti terlihat melakukan override. Berikut ini adalah kode sass yang digunakan sebagaimana kondisi diatas (membuat border radius dan memanggilnya pada suatu div atau class tertentu.

@mixin buatBorder($tebalBorder){
    -webkit-border-radius: $tebalBorder;
    -moz-border-radius: $tebalBorder;
    -ms-border-radius: $tebalBorder;
    border-radius: $tebalBorder;
}

.menu {
    @include buatBorder(10px);
}

jika kita mengkompilenya atau mengkonversi menjadi css maka yang dihasilkan adalah

.menu {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px; }

/*# sourceMappingURL=mycss.css.map */

2. Inheritances

Inheritances atau pewarisan merupakan konsep yang ada pada object oriented programming dalam hal class. Pada sass kita dapat menggunakan inhetitances yakni konsep “extends” yaitu mewariskan stylesheet dari parent ke child. Penulisan extends pada sass adalah

@extend nama class / id

Inhetirances ini sangat berguna sekali karena tentunnya kita sering melakukan penulisan stylesheet yang redundant. Misalnya kita memiliki lima buah elemen A, B ,C, D dan E. Setiap elemen tersebut memiliki margin yang sama yakni 10px 5px 10px 5px. ketika kita menulisnya dengan menggunakan css biasa maka kita harus menuliskan seluruh margin tersebut ke setiap elemen (A,B,C,D,E). Namun jika menggunakan sass kita dapat menggunakan fungsi inheritances sehingga cukup definisikan margin pada parent kemudian kita extends dari child class / id.

Contoh penulisan kode sass untuk mengakomodasi kasus diatas adalah sebagai berikut ini

.margin_default_komponen {
    border: 10px 5px 10px 5px;
}

.a {
    @extend .margin_default_komponen;
    color: red;
}

.b {
    @extend .margin_default_komponen;
    color: blue;
}

.c {
    @extend .margin_default_komponen;
    color: yellow;
}

.d {
    @extend .margin_default_komponen;
    color: black;
}

jika kita melakukan compile dari sass diatas menjadi css maka file output yang akan dihasilkan adalah sebagai berikut ini :

.margin_default_komponen, .a, .b, .c, .d {
  border: 10px 5px 10px 5px; }

.a {
  color: red; }

.b {
  color: blue; }

.c {
  color: yellow; }

.d {
  color: black; }

/*# sourceMappingURL=mycss.css.map */

3. Operator

layaknya operator pada umumnya : tambah, bagi, kurang dan kali. Kita dapat menggunakannya diseluruh nilai yang berupa angka pada sass. Contohnya adalah sebagai berikut ini

.menu {
  margin : 50px+30px;
}

jika kita melakukan compile pada sass akan melakukan kalkulasi untuk setiap nilai yang kita berikan operator.

.menu {
  margin: 80px; }

/*# sourceMappingURL=mycss.css.map */

itulah tiga fungsi dari sass pada part 2 ini. Sesungguhnya masih banyak fungsi sass yang advanced yang dapat kita guanakan. Kedepannya kami akan membuat ulasan lain untuk membahas sass advanced.