LESS merupakan ekstensi dari CSS, yang menambahkan perilaku dinamis seperti variabel, mixin, operasi, dan fungsi. LESS dapat dijalankan pada sisi klien (Chrome, Safari, FIrefox) maupun server (menggunakan Node.js dan Rhino.

Catatan:

  • Dokumentasi ini terakhir kali diperbaharui pada tanggal 28 Oktober 2012. Pembaruan terbaru akan segera dilakukan oleh penulis.

Overview

Tulisan ini merupakan terjemahan dari website resmi LESS, untuk mempermudah pengguna berbahasa Indonesia yang ingin menggunakan LESS. Dokumentasi lengkap LESS yang telah diterjemahkan juga dapat dibaca pada posting berikut.

Variabel

Variabel memungkinkan kita untuk mendefinisikan nilai-nilai yang banyak digunakan pada satu tempat, kemudian menggunakannya pada bagian lain dalam style sheet, menjadikan pengubahan nilai pada semua bagian kode menjadi semudah penggantian satu baris kode.

  // LESS

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}
/* Hasil CSS */

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

Mixin

Mixin memungkinkan kita untuk menanamkan property dari sebuah class ke dalam class lainnya dengan hanya memasukkan nama class tersebut sebagai salah satu property. Pada dasarnya mixin sama seperti variabel, tetapi untuk seluruh class. Mixin juga dapat berlaku seperti fungsi, dan menerima argumen, seperti contoh di bawah.

// LESS

.rounded-corners (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}
/* Hasil CSS */

#header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#footer {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

Nested Rules (Aturan Bersarang)

Daripada menuliskan nama selector yang panjang untuk menjelaskan inheritance, LESS memungkinkan kita untuk memasukkan selector di dalam selector lainnya. Hal ini menyebabkan inheritance menjadi lebih jelas dan style sheet lebih singkat.

// LESS

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

/* Hasil CSS */

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

Fungsi & Operasi

Apakah ada elemen-elemen di dalam style sheet anda yang proposional terhadap elemen lainnya? Operasi memungkinkan anda untuk menambahkan, mengurangi, membagi, dan mengali nilai property dan warna. Hal ini memungkinkan kita untuk membuat hubungan kompleks antar property. Operasi hanya dapat dilakukan di dalam kurung untuk menjaga kompatibilitas dengan CSS. Fungsi dapat dipetakan satu-satu dengan kode Javascript, memungkinkan kita untuk memanipulasi nilai dengan bebas.

// LESS

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: (@base-color * 3);
  border-left: @the-border;
  border-right: (@the-border * 2);
}
#footer {
  color: (@base-color + #003300);
  border-color: desaturate(@red, 10%);
}

/* Hasil CSS */

#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer {
  color: #114411;
  border-color: #7d2717;
}

Pengunaan LESS

Pengunaan pada Sisi Klien

Pengunaan pada sisi klien merupakan cara yang paling mudah untuk mulai menggunakan dan mengembangkan LESS. Untuk lingkungan produksi, dan terutama jika performa sangat penting, direkomentasikan untuk melakukan kompilasi LESS ke CSS menggunakan node atau perangkat lainnya.

Hubungkan style sheet .less dengan rel, yang memiliki nilai “stylesheet/less“:

<link rel="stylesheet/less" type="text/css" href="styles.less">

Lalu unduh less.js dari sini, dan masukkan dalam elemen <head> pada halaman utama, seperti berikut:

<script src="less.js" type="text/javascript"></script>

Pastikan style sheet .less dimasukkan sebelum elemen script di atas.

Watch mode

Watch mode merupakan fitur sisi klien yang memungkinkan kita untuk melakukan refresh style sheet secara otomatis ketika ada perubahan pada style sheet tersebut.

Untuk mengaktifkan fitur ini, tambahkan ‘#!watch’ pada URL browser, lalu lakukan refresh halaman. Fitur ini juga dapat diaktifkan dengan menjalankan less.watch() pada konsol.

Pengunaan pada Sisi Server

Instalasi

Cara paling mudah untuk melakukan instalasi LESS pada server adalah melalui npm, package manager dari node. Instalasi dapat dilakukan dengan kode berikut:

$ npm install -g less

Pengunaan dengan Command-Line

Setelah selesai diinstalasi, kita dapat menjalankan compiler melalui command-line, seperti berikut:

$ lessc styles.less

Kode di atas akan menghasilkan kode CSS yang telah dikompilasi pada stdout, yang kemudian dapat dipindahkan ke file yang diinginkan, seperti berikut:

$ lessc styles.less > styles.css

Untuk menghasilkan CSS yang telah dikompresi, gunakan opsi -x. Jika ingin mengatur aspek-aspek kompresi, YUI CSS Compressor dapat digunakan melalui opsi --yui-compress.

Untuk melihat semua opsi command line yang ada, jalankan lessc tanpa parameter.

Pengunaan dalam Kode

Compiler LESS dapat dipanggil dari node, seperti berikut:

var less = require('less');

less.render('.class { width: (1 + 1) }', function (e, css) {
    console.log(css);
});

yang akan menghasilkan:

.class {
  width: 2;
}

Kita juga dapat menggunakan parser dan compiler secara manual:

var parser = new(less.Parser);

parser.parse('.class { width: (1 + 1) }', function (err, tree) {
    if (err) { return console.error(err) }
    console.log(tree.toCSS());
});

Konfigurasi

Kita dapat mengirimkan opsi ke dalam compiler:

var parser = new(less.Parser)({
    paths: ['.', './lib'], // Mendefinisikan path pencarian untuk @import
    filename: 'style.less' // Mendefinisikan nama file, untuk pesan kesalahan yang lebih baik
});

parser.parse('.class { width: (1 + 1) }', function (e, tree) {
    tree.toCSS({ compress: true }); // Kompres CSS keluaran
});

Perangkat Thrid Party

Terdapat perangkat-perangkat lain yang tersedia dan didokumentasikan dalam wiki github.

Command Line Tools

GUI Tools

comments powered by Disqus

Daftar Isi