Less: Perbedaan antara revisi

Revisi terkini sejak 23 Agustus 2026 03.08

Less atau Learner Style Sheets adalah bahasa pra-pengolahan dinamis yang dapat dihimpun (compiled) menjadi Cascading Style Sheets (CSS) untuk sisi klien dan server.^[1] Less dirancang oleh Alexis Sellier, seorang pengembang perangkat lunak asal Prancis.^[2] Less memiliki pengaruh dari Sass dan bahkan memengaruhi perkembangan sintaks "SCSS" dalam Sass.^[3]

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.^[4]

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. <syntaxhighlight lang="less"> @pale-green-color: #4D926F;

header {

 color: @pale-green-color;

} h2 {

 color: @pale-green-color;

} </syntaxhighlight>Kode Less di atas akan diterjemahkan menjadi kode CSS seperti berikut:<syntaxhighlight lang="css">

header {

 color: #4D926F;

} h2 {

 color: #4D926F;

} </syntaxhighlight>

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.<syntaxhighlight lang="less"> .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);

} </syntaxhighlight>Kode Less di atas akan diterjemahkan menjadi kode CSS seperti berikut:<syntaxhighlight lang="css">

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;

} </syntaxhighlight>Less memiliki jenis aturan khusus yang disebut "mixin parametrik" yang bisa dicampurkan seperti kelas, tapi dapat menerima masukan (parameter).<syntaxhighlight lang="less">

header {

 h1 {
   font-size: 26px;
   font-weight: bold;
 }
 p {
   font-size: 16px;
   a {
     text-decoration: none;
     color: red;
     &:hover {
       border-width: 1px;
       color: #fff;
     }
   }
 }

} </syntaxhighlight>Kode Less di atas akan diterjemahkan menjadi kode CSS seperti berikut:<syntaxhighlight lang="css">

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;

} </syntaxhighlight>

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.<syntaxhighlight lang="less"> @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%);

} </syntaxhighlight>Kode Less di atas akan diterjemahkan menjadi kode CSS seperti berikut:<syntaxhighlight lang="css">

header {

 color: #333;
 border-left: 1px;
 border-right: 3px;

}

footer {

 color: #114411;
 border-color: #7d2717;

} </syntaxhighlight>

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.^[5] Less dirancang agar ditulis sesederhana mungkin dengan CSS. Versi-versi terbaru Sass juga memperkenalkan sintaks mirip CSS yang disebut SCSS.^[6]^[7]

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^[8]	Windows	Compiler
Crunch	GPL^[9]	Windows, Mac OS X	Compiler Editor
less.js-windows	MIT License^[10]	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^[11]	Windows Mac OS X Linux	Compiler
Chirpy	Ms-PL^[12]	Visual Studio Plugin	Compiler
Mindscape Web Workbench	Proprietary	Visual Studio Plugin	Compiler Syntax Highlighting
Eclipse Plugin for Less	EPL 1.0^[13]	Eclipse Plugin	Syntax highlighting Content assist Compiler
mod_less	Open Source	Linux	Compiler
grunt-contrib-less	MIT^[14]	Node.js	Compiler
Web Essentials	Apache 2.0 ^[15]	Windows	Syntax highlighting, Content assist, Compiler
clessc	MIT^[16]	at least Windows, Linux, MacOS	Compiler
Less WebCompiler	MIT^[17]	at least Windows, Linux, MacOS	Compiler, Syntax highlighting, Minifier

Pranala luar

Referensi

↑ The Core Less Team. Getting started Less.js. Less.js.
↑ LESS (Stylesheet Language). www.lasgondolas.es.
↑ Nathan Weizenbaum. Sass and Less : Nex3. 2009-06-17.
↑ Jiew Meng. css - Is there a SASS.js? Something like LESS.js?. Stack Overflow. 2010-12-14.
↑ The Core Less Team. About Less.js. Less.js.
↑ Chris Eppstein. sass_and_less_compared.markdown. GitHub Gist. 2010-11-10.
↑ Jeff Atwood. What's Wrong With CSS. Coding Horror. 2010-04-30.
↑ Mark Lagendijk. License Information · Issue #55 · marklagendijk/WinLess. GitHub. 2013-01-29.
↑ Matthew Dean. Crunch/LICENSE.txt at master · matthew-dean/Crunch. GitHub. 2011-12-02.
↑ Duncan Smart. less.js-windows/LICENSE at master · duncansmart/less.js-windows. GitHub. 2013-07-25.
↑ Christian Engel. SimpLESS/LICENSE.txt at master · Paratron/SimpLESS. GitHub. 2012-07-29.
↑ Evan Nagle. Chirpy - VS Add In For Handling Js, Css, DotLess, and T4 Files - CodePlex Archive. CodePlex.
↑ Vincent Simonet. Eclipse plugin for LESS. normalesup.org.
↑ Tyler Kellen. grunt-contrib-less/LICENSE-MIT at master · gruntjs/grunt-contrib-less. GitHub. 2012-09-04.
↑ Mads Kristensen. WebEssentials2013/LICENSE.txt at master · madskristensen/WebEssentials2013. GitHub. 2014-06-18.
↑ Bram van der Kroef. clessc/LICENSE at master · BramvdKroef/clessc. GitHub. 2017-07-11.
↑ SamBrishes. snout.less/LICENSE.md at master · pytesNET/snout.less. GitHub. 2018-12-15.

Sumber dan atribusi

Konten artikel ini diadaptasi dari Wikipedia bahasa Indonesia, revisi 26980388 (2025-03-01T01:21:56Z), yang tersedia berdasarkan lisensi Creative Commons Atribusi-BerbagiSerupa (CC BY-SA). Gambar pada artikel ini bersumber dari Wikimedia Commons dan mengikuti ketentuan lisensi masing-masing berkas. Mohon gunakan konten dan media secara bijak serta sesuai dengan ketentuan lisensi yang berlaku.

[main-1] The Core Less Team. Getting started Less.js. Less.js.

[2] LESS (Stylesheet Language). www.lasgondolas.es.

[compare-3] Nathan Weizenbaum. Sass and Less : Nex3. 2009-06-17.

[no-sass-js-4] Jiew Meng. css - Is there a SASS.js? Something like LESS.js?. Stack Overflow. 2010-12-14.

[about-5] The Core Less Team. About Less.js. Less.js.

[6] Chris Eppstein. sass_and_less_compared.markdown. GitHub Gist. 2010-11-10.

[whats-wrong-with-css-7] Jeff Atwood. What's Wrong With CSS. Coding Horror. 2010-04-30.

[8] Mark Lagendijk. License Information · Issue #55 · marklagendijk/WinLess. GitHub. 2013-01-29.

[9] Matthew Dean. Crunch/LICENSE.txt at master · matthew-dean/Crunch. GitHub. 2011-12-02.

[10] Duncan Smart. less.js-windows/LICENSE at master · duncansmart/less.js-windows. GitHub. 2013-07-25.

[11] Christian Engel. SimpLESS/LICENSE.txt at master · Paratron/SimpLESS. GitHub. 2012-07-29.

[12] Evan Nagle. Chirpy - VS Add In For Handling Js, Css, DotLess, and T4 Files - CodePlex Archive. CodePlex.

[13] Vincent Simonet. Eclipse plugin for LESS. normalesup.org.

[14] Tyler Kellen. grunt-contrib-less/LICENSE-MIT at master · gruntjs/grunt-contrib-less. GitHub. 2012-09-04.

[15] Mads Kristensen. WebEssentials2013/LICENSE.txt at master · madskristensen/WebEssentials2013. GitHub. 2014-06-18.

[16] Bram van der Kroef. clessc/LICENSE at master · BramvdKroef/clessc. GitHub. 2017-07-11.

[17] SamBrishes. snout.less/LICENSE.md at master · pytesNET/snout.less. GitHub. 2018-12-15.

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]

[14]

[15]

[16]

[17]

Maintenance script (bicara | kontrib)

Revisi terkini sejak 23 Agustus 2026 03.08

Fitur

Variabel

Campuran

Fungsi atau operasi

Perbedaan

Sass

Penggunaan

Perangkat lunak

Pranala luar

Referensi

Sumber dan atribusi