Less
Less | |
---|---|
![]() | |
Dirancang oleh | Alexis Sellier |
Pengembang | Alexis Sellier, Dmitry Fadeyev |
Rilis perdana | 2009; 15 tahun lalu (2009) |
Rilis stabil | 4.2.0[1] ![]() |
Tipe sistem | Dinamis |
Implementasi dari | JavaScript |
Sistem operasi | Lintas platform |
Lisensi | Apache License 2.0 |
Ekstensi nama berkas | .less |
Situs web | lesscss |
Repositori | lesscss |
Terpengaruh oleh | |
CSS, Sass | |
Mempengaruhi | |
Sass, Less Framework, Bootstrap (v3) | |
![]() ![]() |
Less atau Learner Style Sheets adalah bahasa pra-pengolahan dinamis yang dapat dihimpun (compiled) menjadi Cascading Style Sheets (CSS) untuk sisi klien dan server.[2] Less dirancang oleh Alexis Sellier, seorang pengembang perangkat lunak asal Prancis.[3] Less memiliki pengaruh dari Sass dan bahkan memengaruhi perkembangan sintaks "SCSS" dalam Sass.[4]
Less merupakan proyek open source yang telah mengalami evolusi dalam penggunaan bahasa pemrograman, awalnya ditulis dalam Ruby kemudian beralih ke JavaScript.
Salah satu fitur unik dari Less adalah sintaks yang bersarang (nested/indented syntax), sintaks tersebut memungkinkan pengguna untuk menulis kode yang lebih terstruktur dan mudah dibaca. Dalam Less, pemrogram dapat menggunakan variabel, nesting, mixing, operator, dan fungsi untuk membuat gaya atau tampilan yang lebih dinamis. Salah satu perbedaan utama antara Less dan pra-pemroses CSS lainnya adalah kemampuannya untuk melakukan kompilasi secara real-time melalu less.js di browser sehingga perubahan pada gaya dapat langsung dilihat.[5]
Fitur
Variabel
Less memungkinkan pengguna untuk mendifinisikan sebuah variabel. Variabel dalam Less didefinisikan dengan tanda at (@). Penugasan variabel diakhiri dengan menggunakan colon atau titik dua (:).
Selama proses terjemahan, nilai dari variabel-variabel ini dimasukkan ke dalam dokumen CSS yang dihasilkan.
@pale-green-color: #4D926F; #header { color: @pale-green-color; } h2 { color: @pale-green-color; }
Kode Less di atas akan diterjemahkan menjadi kode CSS seperti berikut:
#header { color: #4D926F; } h2 { color: #4D926F; }
Campuran
Campuran atau Mixins memungkinkan penyisipan semua properti dari sebuah kelas ke dalam kelas lain dengan mencantumkan nama kelas sebagai salah satu propertinya, sehingga berperilaku seperti konstanta atau variabel. Mereka juga dapat berperilaku seperti fungsi dan menerima argumen. Mixins tidak didukung oleh CSS.
.rounded-corners (@radius: 5px 10px 8px 2px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } #header { .rounded-corners; } #footer { .rounded-corners(10px 25px 35px 0px); }
Kode Less di atas akan diterjemahkan menjadi kode CSS seperti berikut:
#header { -webkit-border-radius: 5px 10px 8px 2px; -moz-border-radius: 5px 10px 8px 2px; border-radius: 5px 10px 8px 2px; } #footer { -webkit-border-radius: 10px 25px 35px 0px; -moz-border-radius: 10px 25px 35px 0px; border-radius: 10px 25px 35px 0px; }
Less memiliki jenis aturan khusus yang disebut "mixin parametrik" yang bisa dicampurkan seperti kelas, tapi dapat menerima masukan (parameter).
#header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 16px; a { text-decoration: none; color: red; &:hover { border-width: 1px; color: #fff; } } } }
Kode Less di atas akan diterjemahkan menjadi kode CSS seperti berikut:
#header h1 { font-size: 26px; font-weight: bold; } #header p { font-size: 16px; } #header p a { text-decoration: none; color: red; } #header p a:hover { border-width: 1px; color: #fff; }
Fungsi atau operasi
Less memungkinkan penggunaan operasi dan fungsi, termasuk penambahan, pengurangan, pembagian, dan perkalian nilai seperti properti dan warna sehingga menciptkan hubungan yang kompleks antar properti. Fungsi berhubungan satu per satu dengan JavaScript, yang memberikan peluang 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 * 3; } #footer { color: @base-color + #003300; border-color: desaturate(@red, 10%); }
Kode Less di atas akan diterjemahkan menjadi kode CSS seperti berikut:
#header { color: #333; border-left: 1px; border-right: 3px; } #footer { color: #114411; border-color: #7d2717; }
Perbedaan
Sass
Sass dan Less keduanya merupakan pra-pengolah CSS yang memungkinkan penulisan CSS yang efisien dalam konstruksi pemrograman. Less sendiri terinspirasi dari Sass, Sass dirancangg untuk menyederhanakan dan memperluas CSS, sehingga hal-hal seperti kurung keriting dihilangkan dari sintaksnya.[6] Less dirancang agar ditulis sesederhana mungkin dengan CSS. Versi-versi terbaru Sass juga memperkenalkan sintaks mirip CSS yang disebut SCSS.[7][8]
Penggunaan
Less dapat diterapkan pada pengembangan web dengan beberapa cara, salah satunya adalah dengan menyertakan beraks JavaScript less.js untuk mengonversi kode secara langsung. Kemudian, peramban akan membaca CSS yang dihasilkan oleh Less. Cara lain adalah dengan menerjemahkan kode Less menjadi CSS murni kemudian mengunggah atau menyambungkan CSS tersebut ke web. Dengan pilihan ini, berkas .less tidak perlu diunggah dan tidak memerlukan konverter less.js.
Perangkat lunak
Nama perangkat lunak | Lisensi | Platform | Fungsi |
---|---|---|---|
WinLess - Windows GUI for less.js | Apache 2.0[9] | Windows | Compiler |
Crunch | GPL[10] | Windows, Mac OS X | Compiler Editor |
less.js-windows | MIT License[11] | Windows | Compiler |
less.app | Proprietary | Mac OS X | Compiler |
CodeKit | Proprietary | Mac OS X | Compiler |
LessEngine | Free | OpenCart Plugin | Compiler |
SimpLESS | free but no explicit license[12] | Windows Mac OS X Linux | Compiler |
Chirpy | Ms-PL[13] | Visual Studio Plugin | Compiler |
Mindscape Web Workbench | Proprietary | Visual Studio Plugin | Compiler Syntax Highlighting |
Eclipse Plugin for Less | EPL 1.0[14] | Eclipse Plugin | Syntax highlighting Content assist Compiler |
mod_less | Open Source | Linux | Compiler |
grunt-contrib-less | MIT[15] | Node.js | Compiler |
Web Essentials | Apache 2.0 [16] | Windows | Syntax highlighting, Content assist, Compiler |
clessc | MIT[17] | at least Windows, Linux, MacOS | Compiler |
Less WebCompiler | MIT[18] | at least Windows, Linux, MacOS | Compiler, Syntax highlighting, Minifier |
Referensi
- ^ "Release 4.2.0". 7 September 2023. Diakses tanggal 18 September 2023.
- ^ The Core Less Team. "Getting started | Less.js". Less.js. Diakses tanggal 2021-03-19.
- ^ "LESS (Stylesheet Language)". www.lasgondolas.es. Diakses tanggal 2023-10-27.
- ^ Weizenbaum, Nathan (2009-06-17). "Sass and Less : Nex3". Diarsipkan dari versi asli tanggal 2009-06-21. Diakses tanggal 2021-03-19. Parameter
|url-status=
yang tidak diketahui akan diabaikan (bantuan) - ^ Meng, Jiew (2010-12-14). Mortensen, Peter, ed. "css - Is there a SASS.js? Something like LESS.js?". Stack Overflow. Diakses tanggal 2021-03-19.
- ^ The Core Less Team. "About | Less.js". Less.js. Diakses tanggal 2021-03-19.
- ^ Eppstein, Chris (2010-11-10). "sass_and_less_compared.markdown". GitHub Gist. Diakses tanggal 2021-03-19.
- ^ Atwood, Jeff (2010-04-30). "What's Wrong With CSS". Coding Horror. Diakses tanggal 2022-12-03.
- ^ Lagendijk, Mark (2013-01-29). "License Information · Issue #55 · marklagendijk/WinLess". GitHub. Diakses tanggal 2021-03-19.
- ^ Dean, Matthew (2011-12-02). "Crunch/LICENSE.txt at master · matthew-dean/Crunch". GitHub. Diakses tanggal 2021-03-19.
- ^ Smart, Duncan (2013-07-25). "less.js-windows/LICENSE at master · duncansmart/less.js-windows". GitHub. Diakses tanggal 2021-03-19.
- ^ Engel, Christian (2012-07-29). "SimpLESS/LICENSE.txt at master · Paratron/SimpLESS". GitHub. Diakses tanggal 2021-03-19.
- ^ Evan Nagle. "Chirpy - VS Add In For Handling Js, Css, DotLess, and T4 Files - CodePlex Archive". CodePlex. Diarsipkan dari versi asli tanggal 2021-02-20. Diakses tanggal 2021-03-19.
- ^ Vincent Simonet. "Eclipse plugin for LESS". normalesup.org. Diakses tanggal 2021-03-19.
- ^ Kellen, Tyler (2012-09-04). "grunt-contrib-less/LICENSE-MIT at master · gruntjs/grunt-contrib-less". GitHub. Diakses tanggal 2021-03-19.
- ^ Kristensen, Mads (2014-06-18). "WebEssentials2013/LICENSE.txt at master · madskristensen/WebEssentials2013". GitHub. Diakses tanggal 2021-03-19.
- ^ Bram van der Kroef (2017-07-11). "clessc/LICENSE at master · BramvdKroef/clessc". GitHub. Diakses tanggal 2021-03-19.
- ^ SamBrishes (2018-12-15). "snout.less/LICENSE.md at master · pytesNET/snout.less". GitHub. Diakses tanggal 2021-03-19.
Pranala luar
- Situs web resmi