Setiap programmer pastilah selalu ingin memiliki alat atau cara sendiri untuk memudahkan pembuatan produknya. Seperti halnya code editor, pembuatan kode pendukung pun seringkali dijadikan sebagai "senjata" demi deadline yang seringkali menghantui :D. Nah, untuk slicing atau konversi PSD ke html ada cara yang dinamis dalam mengolah CSS bernama LESS. Less merupakan preprocessor (pra pengolahan) CSS, jadi dengan Less kita bisa membuat CSS dengan lebih mudah karena pada Less kita bisa mendefinisikan dan memakai variabel, mixin dan algoritma sederhana. Cara kerja dari Less ini cukup sederhana. Pertama kita buat style dengan Less( extensi .less), lalu file less tersebut di compile menggunakan  less.js.  Kurang jelas? sederhananya ada di kode ini:

Less Variable

Kode Less

@biru: #2912BA;
#wrapper {
  background-color: @biru;
}

Hasil compilasi

#wrapper {
  color: #2912BA;
}

Variabel @biru bernilai #2912BA di panggil oleh id(#)wrapper.

Less Mixing

.kotak (@pojok: 5px) {
  border-radius: @pojok;
}

#wrapper {
  .kotak;
}

#container{
  .kotak(10px);
}

Hasil kompilasi

#wrapper{
   border-radius:5px;
}
#container{
   border-radius:10px;
}

Nah, .kotak di atas itu bukan class, tapi variabel mixing(sebut saja begitu). Jadi mixing disini seperti halnya function di php, kita bisa menentukan nilai default dan bisa di ubah nantinya.

Nested Rules

#wrapper {
  h1 {
    font-size: 14pt;
  }
  p { font-size: 10px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

Hasil kompilasi

#wrapper h1 {
  font-size: 14pt;
  font-weight: bold;
}
#wrapper p {
  font-size: 10px;
}
#wrapper p a {
  text-decoration: none;
}
#wrapper p a:hover {
  border-width: 1px;
}

Function & Operation

@border: 2px;

#wrapper {
  border: (@border * 3);
}
#container{
  font-size:(@border * 10);
}

Hasil kompilasi

#wrapper{
  border:6px;
}

#container{
  font-size:20px;
}

Cara menggunakan Less

<link rel="stylesheet/less" type="text/css" href="styledefault.less" />
<script src="less.js" type="text/javascript"></script>

Mudah bukan? silahkan unduh demonya di sini. Demonya buka di localhost yah.

Happy Ngoprek!!

Setiap programmer pastilah selalu ingin memiliki alat atau cara sendiri untuk memudahkan pembuatan produknya. Seperti halnya code editor ,...