Skip to main content

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

Comments

Post a Comment

Popular posts from this blog

Pengertian Fotografi

Fotografi ( Photography, Ingrris ) berasal dari 2 kata yaitu Photo yang berarti cahaya dan Graph yang berarti tulisan / lukisan. Dalam seni rupa, fotografi adalah proses melukis / menulis dengan menggunakan media cahaya. Sebagai istilah umum, fotografi berarti proses atau metode untuk menghasilkan gambar atau foto dari suatu obyek dengan merekam pantulan cahaya yang mengenai obyek tersebut pada media yang peka cahaya. Alat paling populer untuk menangkap cahaya ini adalah kamera. Jadi dapat disimpulkan bahwa tidak ada cahaya, berarti tidak ada foto yang bisa dibuat. Prinsip fotografi adalah memokuskan cahaya dengan bantuan pembiasan sehingga mampu membakar medium penangkap cahaya. Medium yang telah dibakar dengan ukuran luminitas cahaya yang tepat akan menghailkan bayangan identik dengan cahaya yang memasuki medium pembiasan (selanjutnya disebut lensa). Untuk menghasilkan intensitas cahaya yang tepat untuk menghasilkan gambar, digunakan bantuan alat ukur berupa lightmete...
Post a Comment
Read more

Kisah Klasik

Terkadang semua yang terlihat bahagia belum tentu benar bahagia. Begitu pula sebaliknya. Masa lalu adalah proyeksi, dan masa depan adalah tujuan. Kita dapat merangkai masa depan sesuai yang kita harapkan. Tapi kita juga berhak menoleh ke belakang untuk mempelajari cerita di masa lalu yang merupakan sumber pembelajaran. Tentunya harus diambil dari segi positifnya. Membicarakan tentang masa lalu memang tidak jauh dari sosok seorang mantan. Tetapi akan sangat indah dan membuat kita rindu jika kita mengingat tetang persahabatan. Ya.. Sahabat itu memang segalanya. Terlebih jika dibandingkan dengan mantan. Bagaimana tidak? Disana tersimpan beragam memori, kenangan, keceriaan, canda tawa, kebahagiaan, kebersamaan, bahkan sampai tetes air mata kesedihan. Saya sangat merindukan mereka. Andai waktu dapat berputar, andai ada mesin waktu atau lorong waktu yang bisa mengantarkan saya ke masa itu. Mungkin saat ini saya akan jalan-jalan ke masa lalu. Sekedar mengobati rasa rindu dan ...
Post a Comment
Read more

Pengertian OSI ( Open Sytem Interconnection )

OSI adalah desain bentuk lapisan jaringan dan protokol jaringan yang di keluarkan oleh ISO ( International Standard Organization ) dan masuk dalam standar de jure. OSI terbagi dalam 7 lapisan, berikut ini akan diurutkan mulai dari hal yang paling umum atau yang memang biasa digunakan. a. Application Layer (Layer 7, Lapisan aplikasi) Didalam sebuah jaringan komputer, berfungsi menyediakan sarana-sarana pelayanan unik ke end user pada jaringan komputer dan mengadakan komunikasi dari program ke program. Misalnya : E-mail,Browsing, FTP,Virtual terminal dan akses ke database. b. Presentation Layer (Layer 6, Lapisan presentasi) Fungsinya menyediakan sarana untuk konversi,format,kompresi dan enkripsi data. Misalnya : MIDI,JPEG,PNG,ASCII,EBCDIC,Quicktime dan MKV. c. Session Layer (Layer 5, Lapisan sesi) Fungsinya membuka, mengatur dan menutup suatu session antara aplikasi. SQL, X-Windows, NFS dan ASP adalah protokol yang berfungsi di lapisan ini. d. Transport Layer (Layer 4...
Post a Comment
Read more