Sebagai ekstensi dari CSS, LESS tidak hanya kompatibel dengan CSS, tetapi fitur-fitur tambahan dari LESS juga menggunakan sintaks CSS yang ada sekarang. Hal ini menyebabkan mempelajari LESS sangat mudah, dan jika terdapat keragu-raguan mengenai fitur LESS, kita dapat kembali menggunakan CSS.

Catatan:

  • Dokumentasi ini terdiri dari dua bagian. Artikel ini hanya memuat bagian pertama. Bagian kedua dapat dibaca pada artikel berikut.
  • Dokumentasi ini terakhir kali diperbaharui pada tanggal 28 Oktober 2012. Pembaruan terbaru akan segera dilakukan oleh penulis.

Variabel

Fitur ini cukup jelas:

@nice-blue: #5B83AD;
@light-blue: (@nice-blue + #111);

#header { color: @light-blue; }

Menghasilkan:

#header { color: #6c94be; }

Mendefinisikan variabel dengan nama variabel lainnya juga memungkinkan:

@fnord: "I am fnord.";
@var: 'fnord';
content: @@var;

Yang akan menghasilkan:

content: "I am fnord.";

Perlu diperhatikan bahwa variabel dalam LESS adalah ‘konstanta’, yang berarti variabel hanya dapat didefinisikan satu kali.

Mixins (Pencampuran)

LESS memungkinkan kita untuk menambahkan sekumpulan property dari sebuah ruleset ke ruleset lainnya. Misalkan jika terdapat class berikut:

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

Dan kita ingin menggunakan property tersebut di dalam ruleset lainnya, kita dapat langsung memasukkan nama class tersebut ke dalam ruleset yang ingin menggunakan properti tersebut, seperti:

#menu a {
  color: #111;
  .bordered;
}
.post a {
  color: red;
  .bordered;
}

Property dari class .bordered akan muncul dalam #menu a dan .post a:

#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

Semua ruleset dari class atau id dapat dicampurkan dengan cara seperti ini.

Parametric Mixins (Pencampuran Berparameter)

LESS memiliki tipe khusus dari ruleset yang dapat dicampurkan ke dalam class, yaitu ruleset yang dapat menerima parameter. Berikut adalah contoh utamanya:

.border-radius (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

Dan berikut adalah cara penggabungan kode di atas ke dalam berbagai ruleset lainnya:

#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}

Parametric mixins juga dapat memiliki nilai standar untuk parameter:

.border-radius (@radius: 5px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

Sehingga kode di atas dapat dipanggil dengan cara berikut:

#header {
  .border-radius;
}

Yang akan menghasilkan border-radius berukuran 5px.

Kita juga dapat menggunakan parametric mixin yang tidak memiliki parameter. Fitur ini berguna jika kita ingin menyembunyikan ruleset dari keluaran CSS, tetapi ingin menggunakan property pada ruleset lainnya. Kode berikut:

.wrap () {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

pre { .wrap }

Akan menghasilkan:

pre {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

Variabel @arguments

@arguments memiliki arti khusus di dalam mixin, di mana @arguments akan mengandung seluruh argumen yang diberikan ketika mixin dipanggil. Hal ini berguna jika kita tidak ingin menyebutkan nilai parameter satu demi satu. Kode berikut:

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);

Akan menghasilkan:

  box-shadow: 2px 5px 1px #000;
  -moz-box-shadow: 2px 5px 1px #000;
  -webkit-box-shadow: 2px 5px 1px #000;

Pattern-matching and Guard expressions (Pencocokan Pola dan Ekspresi Penjaga)

Terkadang kita ingin mengganti perilaku dari mixin, sesuai dengan parameter yang dikirimkan ke mixin tersebut. Mulai dari hal yang sederhana seperti berikut:

.mixin (@s, @color) { ... }

.class {
  .mixin(@switch, #888);
}

Di mana kita ingin .mixin memiliki perilaku yang berbeda, sesuai dengan nilai dari @switch. Hal ini dapat dicapai dengan mendefinisikan .mixin seperti berikut:

.mixin (dark, @color) {
  color: darken(@color, 10%);
}
.mixin (light, @color) {
  color: lighten(@color, 10%);
}
.mixin (@_, @color) {
  display: block;
}

Sekarang, jika kita jalankan:

@switch: light;

.class {
  .mixin(@switch, #888);
}

Maka kita akan mendapatkan CSS berikut:

.class {
  color: #a2a2a2;
  display: block;
}

Dan ketika warna lain dikirimkan ke .mixin maka warna tersebut akan menjadi lebih terang. Jika nilai dari @switch adalah dark maka kita akan mendapatkan warna yang lebih gelap.

Yang terjadi adalah sebagai berikut:

  • Definisi mixin yang pertama tidak cocok, karena definisi ini mengharapkan nilai dark sebagai argumen pertama.
  • Definisi mixin yang kedua cocok, karena definisi ini mengharapkan light.
  • Definisi mixin yang ketiga cocok, karena definisi ini mengharapkan nilai apapun.
  • The third mixin definition matched because it expected any value.

Hanya definisi mixin yang cocok dengan parameter yang digunakan. Variabel dapat dicocokkan dan diikatkan dengan nilai apapun. Segala hal selain variabel hanya dapat dicocokkan dengan nilai yang sama dengan dirinya.

Pencocokan juga dapat dilakukan berdasarkan jumlah argumen. Misalnya:

.mixin (@a) {
  color: @a;
}
.mixin (@a, @b) {
  color: fade(@a, @b);
}

Sekarang jika .mixin dipanggil dengan satu argumen, maka kita akan mendapatkan hasil dari definisi pertama. Jika .mixin dipanggil dengan dua argumen, maka kita akan mendapatkan definisi yang kedua, di mana @a memudar menjadi @b.

Guards (Penjaga)

Guard berguna ketika kita ingin mencocokkan ekspresi, bukan nilai atau jumlah argumen. Jika anda akrab dengan pemrograman fungsional maka anda pasti sudah pernah menggunakan fitur ini.

Untuk tetap dekat dengan sifat deklaratif CSS, LESS mengimplementasikan fitur kondisional dengan guard mixin alih-alih pernyataan if/else. Fitur ini sejenis dengan spesifikasi @media query dari CSS 3.

Mari mulai dengan contoh:

.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}

Kuncinya adalah pada keyword when, yang memberikan rentetan guard (pada contoh hanya satu guard). Jika kode berikut dijalankan:

.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }

Maka kita akan mendapatkan:

.class1 {
  background-color: black;
  color: #ddd;
}
.class2 {
  background-color: white;
  color: #555;
}

Daftar dari operator perbandingan yang dapat digunakan dalam guard adalah: *> >= = =< <*. Selain itu, *keyword true menjadikan sebuah parameter selalu benar, sehingga kedua *mixin berikut adalah sama:

.truth (@a) when (@a) { ... }
.truth (@a) when (@a = true) { ... }

Dan semua nilai selain true menjadi salah:

.class {
  .truth(40); // Tidak akan cocok dengan kedua definisi di atas.
}

Guard dapat dipisahkan dengan koma ‘,’–jika salah satu guard bernilai benar, maka semuanya akan dianggap benar. Misalnya kode berikut:

.mixin (@a) when (@a > 10), (@a < -10) { ... }

Perlu diperhatikan bahwa kita dapat juga membandingkan satu argumen dengan argumen lainnya, ataupun dengan yang bukan argumen, seperti berikut:

@media: mobile;

.mixin (@a) when (@media = mobile) { ... }
.mixin (@a) when (@media = desktop) { ... }

.max (@a, @b) when (@a > @b) { width: @a }
.max (@a, @b) when (@a < @b) { width: @b }

Dan terakhir, jika kita ingin mencocokkan mixin berdasarkan tipe data dari sebuah nilai, maka kita dapat menggunakan fungsi *is** seperti berikut:

.mixin (@a, @b: 0) when (isnumber(@b)) { ... }
.mixin (@a, @b: black) when (iscolor(@b)) { ... }

Berikut adalah fungsi-fungsi dasar untuk pengecekan tipe data:

  • iscolor
  • isnumber
  • isstring
  • iskeyword
  • isurl

Jika ingin melakukan pengecekan apakan sebuah nilai adalah bilangan dan memiliki satuan yang spesifik, maka fungsi-fungsi berikut dapat digunakan:

  • ispixel
  • ispercentage
  • isem

Kita juga dapat menggunakan keyword and untuk memberikan kondisi tambahan di dalam guard:

.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }

Dan juga keyword not untuk memberikan negasi dari kondisi:

.mixin (@b) when not (@b > 0) { ... }

Nested rules (Aturan Bersarang)

LESS memungkinkan kita untuk menggunakan nesting alih-alih, atau bersamaan dengan cascading. Misalkan kode CSS berikut:

#header { color: black; }
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}
#header .logo:hover {
  text-decoration: none;
}

Dapat dituliskan dalam LESS seperti ini:

#header {
  color: black;

  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    &:hover { text-decoration: none }
  }
}

Atau:

#header        { color: black;
  .navigation  { font-size: 12px }
  .logo        { width: 300px;
    &:hover    { text-decoration: none }
  }
}

Di mana kode LESS yang dihasilkan lebih singkat, dan sesuai dengan struktur DOM tree kita.

Perhatikan kombinator &–yang digunakan ketika kita ingin selector bersarang disatukan dengan selector induknya, bukan sebagai turunan. Hal ini penting untuk pseudo-class seperti :hover dan :focus.

Misalnya:

.bordered {
  &.float {
    float: left;
  }
  .top {
    margin: 5px;
  }
}

Akan menghasilkan:

.bordered.float {
  float: left;
}
.bordered .top {
  margin: 5px;
}

Pengunaan Lanjutan dari &

Simbol & juga dapat digunakan pada selector untuk membalikkan urutan penyarangan dan untuk menyilangkan class.

Contohnya:

.child, .sibling {
    .parent & {
        color: black;
    }
    & + & {
        color: red;
    }
}

Akan menghasilkan:

.parent .child,
.parent .sibling {
    color: black;
}
.child + .child,
.child + .sibling,
.sibling + .child,
.sibling + .sibling {
    color: red;
}

& juga dapat digunakan dalam mixin untuk merujuk ke penyarangan yang ada di luar mixin.

Operasi

Seluruh angka, warna, atau variabel dapat dioperasikan. Operasi dilakukan di dalam kurung. Berikut adalah beberapa contoh operasi yang dapat dilakukan:

@base: 5%;
@filler: (@base * 2);
@other: (@base + @filler);

color: (#888 / 4);
background-color: (@base-color + #111);
height: (100% / 2 + @filler);

Keluarannya adalah sesuai dengan ekspektasi kita—LESS mengerti perbedaan antara warna dan unit. Jika unit digunakan dalam operasi, seperti:

@var: (1px + 5);

LESS akan menggunakan unit tersebut sebagai keluaran—6px dalam contoh ini.

Kurung tambahan juga diperbolehkan dalam operasi:

width: ((@var + 5) * 2);

Fungsi Warna

LESS menyediakan beberapa fungsi yang melakukan transformasi warna. Warna terlebih dahulu diubah ke dalam ruang HSL, dan kemudian dimanipulasi pada level channel:

lighten(@color, 10%);    // mengembalikan warna 10 persen lebih *terang* daripada @color
darken(@color, 10%);     // mengembalikan warna 10 persen lebih *gelap* daripada @color

saturate(@color, 10%);   // mengembalikan warna 10 persen *lebih* jenuh dibandingkan @color
desaturate(@color, 10%); // mengembalikan warna 10 persen *kurang* jenuh dibandingkan @color

fadein(@color, 10%);     
    // mengembalikan warna 10 persen *kurang* transparan dibandingkan @color
fadeout(@color, 10%);    
    // mengembalikan warna 10 persen *lebih* transparan dibandingkan @color
fade(@color, 50%);       // mengembalikan @color dengan 50% transparansi

spin(@color, 10);        // mengembalikan warna 10 derajat lebih besar dalam hue dari @color
spin(@color, -10);       // mengembalikan warna 10 derajat lebih kecil dalam hue dari @color

mix(@color1, @color2, @weight);  
    // mengembalikan campuran warna dari @color1 dan @color2, dengan beban (weight) standar 50%
contrast(@color1, @darkcolor, @lightcolor); 
    // mengembalikan @darkcolor jika @color1 memiliki >50% luma (misal: warna terang),
    // jika tidak mengembalikan @lightcolor

Pengunaan fungsi-fungsi di atas cukup mudah:

@base: #f04615;

.class {
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

Kita juga dapat mengambil informasi warna:

hue(@color);        // mengembalikan *channel* `hue` dari @color
saturation(@color); // mengembalikan *channel* `saturation` dari @color
lightness(@color);  // mengembalikan *channel* `lightness` dari @color
red(@color);        // mengembalikan *channel* `red` dari @color
green(@color);      // mengembalikan *channel* `green` dari @color
blue(@color);       // mengembalikan *channel* `blue` dari @color
alpha(@color);      // mengembalikan *channel* `alpha` dari @color
luma(@color);       // mengembalikan nilai `luma` (persepsi kecerahan) dari @color

Fungsi-fungsi ini berguna ketika kita ingin membuat warna baru berdasarkan channel warna lainnya, misalnya:

@new: hsl(hue(@old), 45%, 90%);

@new akan memiliki nilai hue dari @old, dan nilai jenuh dan cerahnya sendiri. Warna-warna yang ada akan selalu dikembalikan sebagai nilai RGB, sehingga menggunakan spin ke nilai abu-abu tidak akan mengembalikan apa-apa.

Fungsi Matematis

LESS menyediakan beberapa fungsi matematis yang dapat digunakan untuk nilai bilangan: LESS provides a couple of handy math functions you can use on number values:

round(1.67); // mengembalikan `2`
ceil(2.4);   // mengembalikan `3`
floor(2.6);  // mengembalikan `2`

Jika kita ingin mengubah sebuah nilai menjadi persentase, fungsi percentage dapat digunakan:

percentage(0.5); // returns `50%`

Namespaces

Terkadang kita ingin mengelompokkan variabel atau mixin, untuk merapikan kode, atau hanya untuk enkapsulasi. Hal ini dapat dilakukan dengan cukup intuitif dalam LESS. Misalkan jika kita ingin menggabungkan beberapa mixin dan variabel dalam #bundle, untuk kemudian digunakan, dapat dilakukan seperti berikut:

#bundle {
  .button () {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover { background-color: white }
  }
  .tab { ... }
  .citation { ... }
}

Sekarang jika kita ingin melakukan mixin terhadap .button di dalam #header a, kita dapat melakukan:

#header a {
  color: orange;
  #bundle > .button;
}

Scope (Jangkauan)

Scope dalam LESS sangat mirip dengan yang biasa ada dalam bahasa pemrograman. Variabel dan mixin terlebih dahulu dicari pada scope lokal, dan jika tidak ditemukan maka compiler akan mencari ke scope induk, dan seterusnya.

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

#footer {
  color: @var; // red
}

Komentar

Komentar model CSS tetap digunakan oleh LESS:

/* Halo, ini komentar model CSS. */
.class { color: black }

Komentar satu baris juga dapat digunakan di LESS, tetapi komentar ini bersifat ‘silent’, tidak nampak pada CSS hasil kompilasi.

// Halo, saya adalah komentar 'silent'. Saya tidak nampak dalam hasil kompilasi CSS.
.class { color: white }

Importing

Kita dapat melakukan impor file .less, dan seluruh variabel serta mixin yang ada di dalam menjadi dapat diakses pada file utama. Ekstensi .less bersifat opsional, sehingga kedua kode berikut adalah valid:

@import "lib.less";
@import "lib";

Jika kita ingin melakukan impor terhadap file CSS, tanpa file tersebut diproses oleh LESS, gunakan ekstensi .css seperti berikut:

@import "lib.css";

File lib.css tidak akan diubah, dan masuk ke dalam keluaran CSS.

String interpolation

Variabel dapat ditanamkan ke dalam string, dengan cara yang sama pada ruby atau PHP, menggunakan konstruk @{name}

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

Escaping

Terkadang kita ingin mengeluarkan nilai CSS yang bukan sintaks valid CSS atau menggunakan sintaks proprietary yang tidak dimengerti oleh LESS.

Untuk mengeluarkan nilai-nilai tersebut, kita dapat memasukkannya ke dalam sebuah string yang diawali dengan ~, misalnya:

.class {
  filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}

Kode seperti ini disebut “escaped value”, yang menghasilkan:

.class {
  filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}

Selector Interpolation

Pengunaan variabel LESS di dalam selector dapat dilakukan dengan merujuk ke variabel tersebut dengan @{selector}, seperti pada string interpolation. Misalnya:

@name: blocked;
.@{name} {
    color: black;
}

akan menghasilkan

.blocked {
    color: black;
}

Catatan: sebelum LESS versi 1.3.1a, tipe selector (~"@{name}") dapat digunakan. Dukungan terhadap fitur ini akan dibuang kedepannya.

JavaScript evaluation

Ekspresi Javascript dapat dievaluasi sebagai nilai di dalam file .less. Fitur ini disarankan untuk digunakan dengan hati-hati karena kode LESS yang dihasilkan bisa saja tidak kompatibel dengan port dan sulit di-maintain. Jika mungkin, pikirkan fungsi yang dapat digunakan untuk mencapai hasil yang sama dan berikan saran pada github. Tim pengembang memiliki rencana untuk menambahkan fungsi-fungsi dasar. Tetapi jika anda tetap ingin menggunakan Javascript pada LESS, anda dapat membungkus ekspresi tersebut dalam back-tick seperti berikut:

@var: `"hello".toUpperCase() + '!'`;

Akan menghasilkan:

@var: "HELLO!";

Perhatikan bahwa anda mungkin harus menggunakan interpolation dan escaping ketika menggunakan string:

@str: "hello";
@var: ~`"@{str}".toUpperCase() + '!'`;

Akan menjadi:

@var: HELLO!;

Akses penuh ke lingkungan Javascript juga memungkinkan:

@height: `document.body.clientHeight`;

Jika ingin membaca string Javascript sebagai warna heksa, gunakan fungsi color:

@color: color(`window.colors.baseColor`);
@darkcolor: darken(@color, 10%);
comments powered by Disqus

Daftar Isi