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:
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: