Tutorial Menggunakan LESS CSS

14.10.14 endahrika 0 Comments

Baiklah kali ini saya akan mencoba menuliskan apa yang telah di jelaskan oleh teman saya. Sebagai noted untuk diri sendiri dan tentunya untuk share ilmu bagi kalian yang sedang mempelajari apa itu LESS CSS.

LESS berfungsi untuk membantu kita menyederhanakan penulisan pada CSS. Sebelumnya saya sudah menjelaskan mengenai pengertian, tujuan, dan fungsi dari LESS CSS sendiri. Kalau belum sempat baca, silahkan klik link ini http://endahrika.blogspot.com/2014/10/apa-itu-less.html.

Berikut adalah persiapannya :
  1. Download Koala App
    Koala adalah aplikasi GUI untuk Less, Sass, Compass and CoffeeScript compilation, untuk membantu pengembang web untuk menggunakannya lebih efisien. Koala dapat berjalan di windows, linux dan mac. Link : http://koala-app.com/
  2. Download LESS CSS
    Anda bisa mendownload di http://lesscss.org/. Atau supaya Lebih Mudah, Download LESS CSS di dropbox saya https://www.dropbox.com/s/ode3pjgt6vo8dmp/less_default.zip?dl=0

0 komentar:

Perkenalan LESS CSS

14.10.14 endahrika 0 Comments

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:
  1.  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.
  2. 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.
  3. 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.
  4. 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: