InTel Part 4 : " {less} "

Setelah masalah jaringan dan multimedia ...kali ini author akan mereview ke arah programmingnya (sedikit..:p). 

Bagi pada Web Developer kecantikan dari design  web yang di buat akan menjadi salah satu nilai plus bagi user. Dan hal itu sudah pasti adalah kerjaannya si stylish web, apa lagi kalau bukan CSS (Cascading Style Sheet). Kalo misalkan webnya masih web standar, kita memang leukeun (baca: rajin) buat otak atik CSS, tapi kalo webnya udah yang agak ribet atau kelas berat (emangnya tinju..(_ _")), yakin mau bikin CSS berbaris-baris,berlapis-lapis(berapa lapis?--ratusannn..:p). Terus kalau misal ada yang mau di ubah nih design nya...yakin mau ngoprek-in satu-satu CSS nya??ribet kalee....

Lha terus gimana donk?? Hehe... Berterimakasihlah kita - kita semua sama Bapak Alexis yang bikin keribetan itu bisa kita handle lewat CSS dinamis yang bisa kita panggil LESS.

Yuk kenalan sama LESS..(author  kan belum kenalan..:D)

LESS (Dynamic Stylesheet Language)

LESS adalah bahasa stylesheet yang dinamis dirancang oleh Alexis Sellier. Less dipengaruhi oleh Sass dan telah mempengaruhi "SCSS" sintaks Sass yang paling baru, yang mengadaptasi CSS-nya seperti  format sintaks blok.

less logo

Less ini open-source lhoo, (gretongan boo...:P), adi gampang banget buat yang mau explorasi, tinggal download aja library nya , buka IDE nya...oprek dehh..:D (padahal author  sendiri belum nyoba-nyoba ngoprek..hahahah). Biarin laa yaa...motivasiin juga udah alhamdulillah...nanti juga ada saatnya desire buat ngpreknya muncul...(ngeless..:p)

Lanjut ke Mekanisme nya dari Less ini yuk:

   Variabel

   Less memungkinkan variabel dapat didefinisikan. Less variabel didefinisikan 
   dengan tanda (@). Penugasan variabel menggunakan dengan tanda titik dua
   (:).

   contoh:

@color: #FFFFFF;

#header {
  color: @color;
}
h1 {
  color: @color;
}

bandingkan dengan CSS:

#header {
  color: #FFFFFF;
}
h1 {
  color: #FFFFFF;
}

Mixins

Mixins memungkinkan untuk menyimpan semua properti dari kelas ke kelas lain dengan hanya termasuk nama kelas sebagai salah satu sifat-sifatnya. Ini seperti variabel, tetapi untuk kelas-kelas utuh. Mixins juga dapat berperilaku seperti fungsi, dan mengambil argumen.

CSS3 tidak mendukung mixins. Setiap kode harus diulang-ulang di setiap lokasi. Mixins memungkinkan untuk pengulangan kode secara efisien, serta memudahkan perubahan kode.

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

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

bandingkan lagi sama CSS

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

Nesting 

CSS tidak mendukung logical nesting, tetapi blok kode sendiri yang tidak bersarang. Less memungkinkan untuk penyeleksi bersarang (nest) di dalam penyeleksi lainnya. Hal ini membuat inheritance  yang jelas dan stylesheet yang lebih pendek.

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

lagii CSS nyaa

#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

Less memungkinkan operasi dan fungsi. Operasi memungkinkan untuk menambah, mengurangi, membagi dan mengalikan nilai properti dan warna, yang dapat digunakan untuk menciptakan hubungan yang kompleks antara sifat. Fungsi peta satu-ke-satu dengan kode JavaScript, yang memungkinkan untuk memanipulasi nilai-nilai.

@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%);
}

ini versi CSS nya

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

Nah, gimana guys..menarik yaa ... :D

malangnya author malah baru tahu sekarang CSS nya bisa lebih mudah di modifikasi dan mempermudah kita juga buat bikinnya...

semoga bermanfaat ajah deh buat yang memerlukan infonya ...

reference :

http://en.wikipedia.org/