Sass Introduction : Untuk Pemula

gSass singkatan dari Syntactically Awesome Stylesheets. Sass pada dasarnya hanya sebuah ekstensi untul CSS yang membantu kita menulis style lebih fleksibel.

Ini membantu kita membuat stylesheet yang lebih besar dan mempermudah stylesheet yang sulit dipahami. Berkat fitur seperti Mixin, Nesting, Inheritance, menjadikan kode lebih terorganisir, memungkinkan kita untuk bekerja lebih cepat.

Harus diperhatikan ketika kita menulis di Sass , browser tidak akan mengerti kode kita, karena yang kita tulis itu bukan CSS, jadi kita harus menggunakan kompiler untuk mengkompilasi atau menterjemahkan kode Sass kedalam CSS

 

Berikut beberapa contoh aplikasi yang dapat membantu melakukan hal ini :

  • Hammer
  • CodeKit
  • Compass
  • Koala

 

Saya tidak akan menutupi seluruh proses dari instalasi dan kompilasi Sass di bagian ini. Jika kalian ingin bereksperimen dan ikutin saya melalui tutorial ini, saya sarankan menggunakan  editor online seperti codepad ataupun lainnya, tanpa menginstal pada pc anda.

Sebelum kita lanjut, saya ingin memastikan anda tidak akan bingung dengan 2 syntax dari Sass. Ini hanya dua cara yang berbeda dalam menuliksak kode; keduanya memiliki output yang sama. Disini saya akan memberikan contoh dengan menggunakan syntax .scss dalam artikel ini.

 

Variables

Variable adalah yang paling kuat karena dapat memungkinkan anda untuk mengubah kode dengan cepat. Ketika mendefinisikan variable kita menyimpan nilai tertentu di dalamnya, nilai yang diterima dapat berupa angka, string, warna, null, list dan peta.

Untuk mendeklarasikan variable di Sass, dengan ada nya $ diikuti dengan nama variable tersebut. Dalam kasus ini blue sebagai nama variable.

$blue: #3498db;

Let’s see variables in action:

/*

// We define the variables.

*/

$blue: #3498db;

$red: #e74c3c;

$background: #34495e;



/*

// We apply the variables.

*/

body {

background-color: $background;

}



h1 {

color: $blue;

}



p {

color: $red;

}

Which compiles to this:

body {

background-color: #34495e;

}



h1 {

color: #3498db;

}



p {

color: #e74c3c;

}

Ini hanya pengenalan dasar untuk menuliskan variable. Kalian dapat berimprovisasi sendiri tapi tidak melanggar / menyimpang dari aturan aturan penulisan variable.

 

Nesting

Sass memungkinkan kita untuk menggunakan aturan CSS untuk disarangkan / dihubungkan  dalam satu sama lain. Nesting adalah cara yang tepat untuk mengatur struktur CSS anda, dan membuat anda tidak perlu melakukan perulangan. Berikut contoh nya

ul {
  list-style: none;

  li {
    padding: 10px;
    display: inline-block;

    a {
      text-decoration: none;
      font-size: 16px;
      color: #333;
    }
  }
}

Saya sarankan, jangan menggunakan nesting lebih dari empat tingkatan, karena akan membuat kode berantakan dan kesulitan saat ada masalah.

 

Extend/Inheritance

Inheritance adalah salah satu fitur yang paling berguna dalam Sass dan menggunakan perpanjangan. Mari kita sharing set dari properti CSS dari satu ke yang lain.

Extending harus digunakan ketika kita membutuhkan element-element dengan style yang mirip, yang masih berbeda dalam beberapa detail. Berikut contohnya

$blue: #3498db;
$red: #e74c3c;
$white: #fff;

.btn {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  text-align: center;
  border-radius: 4px;
  color: $white;
}

.btn-primary {
  @extend .btn;
  background-color: $blue;
}

.btn-secondary {
  @extend .btn;
  background-color: $red;
}
Which compiles to this:

.btn, .btn-primary, .btn-secondary {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  text-align: center;
  border-radius: 4px;
  color: #fff;
}

.btn-primary {
  background-color: #3498db;
}

.btn-secondary {
  background-color: #e74c3c;
}

Apakah kalian melihat bagaimana penting nya fitur ini ? Sass  menggabungkan selector bukan mengulangi deklarasi yang sama. Ini sangat membantu dalam menghemat memory

 

Mixins

Mixin juga termasuk fitur yang penting di Sass. Mixin dapat memungkinkan untuk membuat grup deklarasi CSS yang ingin kita gunakan kembali untuk website kita. Kita bisa menerapkan sebagai argumen, ini membuat menjadi lebih fleksibel.

Sass menggunakan instruksi @mixin untuk mendefinisikan mixin, dan @include untuk menggunakannya . Coba simak contoh border-radius sebagai berikut

/*
// We declare the mixin.
*/
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

/*
// We apply it on our button.
*/
.btn {
  @include border-radius(4px);
}
Which compiles to this:

.btn {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}

 

Comments

comments