Perkenalan LESS CSS
Tujuan LESS dibuat adalah memberikan support konsep OOP pada CSS.
Begini saja. Menulis kode-kode CSS seringkali menjadi pekerjaan yang membosankan apabila kita harus menuliskan berulang-ulang kode yang hampir sama untuk elemen-elemen yang berbeda.
Masalah lain yang sering timbul adalah penulisan
selector yang panjang untuk menunjukkan sebuah elemen turunan. Hal-hal
tersebut tentunya cukup mengganggu dalam proses membangun tampilan
sebuah web yang baik. Bayangkan kita sedang berada pada project besar dan tentu membutuhkan code CSS yang banyak, mungkin bisa jadi ribuan baris per filenya. Nah pada akhirnya akan sulit untuk di maintenance. Dan kita pun lebih ribet karena menulis kode CSS secara berulang-ulang. Untuk menyelesaikan masalah tersebut muncullah banyak CSS pre-processor untuk menulis CSS lebih dinamis dan mudah. Salah satunya adalah LESS.
LESS adalah
preprosesor CSS yang memberikan sentuhan dinamis kepada CSS
. LESS dikembangkan oleh
Alexis Sellier di mana kelebihan utama dari LESS adalah menambahkan
variable, mixins, operations and
nested rules pada CSS kita. Hal ini membantu kita lebih cepat serta menyederhanakan penulisan koding CSS.
Coba cek disini >>
lesscss.org
Berikut adalah fitur-fitur yang dimiliki LESS:
- Variable
Dengan menggunakan variabel pada LESS kita dapat mendeklarasikan
nilai-nilai yang akan digunakan secara luas atau sering digunakan dalam
satu tempat saja. Nilai-nilai tersebut nantinya dapat kita gunakan
berulang-ulang dalam stylesheet dengan mudah. Dengan demikian,
untuk membuat perubahan kode secara global menjadi lebih mudah,
sesederhana mengubah satu baris kode.
- Mixin
Mixin memungkinkan kita untuk memasukkan semua properti dari
sebuah kelas ke dalam kelas lain cukup dengan menyertakan nama kelas
tersebut sebagai properti kelas tujuan. Pada dasarnya mixin hampir sama dengan variable, tapi mixin mencakup seluruh kelas. Mungkin mixin
ini pada bahasa pemrograman lain bisa Anda setarakan dengan fungsi atau
modul, Anda juga dapat menyertakan parameter atau argument di dalamnya.
Nested Rule
LESS juga mendukung nested rule atau aturan bertingkat yang memungkinkan Anda untuk mendefinisikan elemen turunan dengan spesifik tanpa perlu menuliskan nama selector
dari elemen tersebut dengan baris yang panjang. Anda cukup
mendefinisikan elemen tersebut di dalam elemen induknya. Dengan demikian
turunan elemen dapat diketahui dengan mudah dan membuat kode pada stylesheet lebih ringkas.
Functions & Operations
Pengembang LESS juga menyertakan operasi matematika yang memungkinkan
Anda untuk menjumlahkan, mengurangi, membagi maupun mengalikan warna
atau nilai lainnya pada properti sebuah elemen. Fitur ini mendukung
terjadinya keterkaitan yang lebih kompleks antar properti dari elemen
tampilan sehingga perubahan secara masif bisa dilakukan dengan mudah.
Karena fungsi-fungsi dan operasi tersebut diproses satu persatu
menggunakan javascript, Anda memungkinkan untuk mengatur nilai-nilai properti sedemikian rupa sesuai kehendak.
0 komentar: