Wikipedia

Less

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
Dirancang olehAlexis Sellier
PengembangAlexis Sellier, Dmitry Fadeyev
Rilis perdana2009; 15 tahun lalu (2009)
Rilis stabil
4.2.0[1] Sunting di Wikidata / 7 September 2023; 13 bulan lalu (7 September 2023)
Tipe sistemDinamis
Implementasi dariJavaScript
Sistem operasiLintas platform
LisensiApache License 2.0
Ekstensi nama berkas.less
Situs weblesscss.org
Repositorilesscss.org
Terpengaruh oleh
CSS, Sass
Mempengaruhi
Sass, Less Framework, Bootstrap (v3)
Sunting kotak info
Sunting kotak info • L • B
Info templat
Bantuan penggunaan templat ini

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

sunting

Variabel

sunting

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

sunting

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

sunting

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

sunting

Sass

sunting

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

sunting

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

sunting
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

sunting
  1. ^ "Release 4.2.0". 7 September 2023. Diakses tanggal 18 September 2023. 
  2. ^ The Core Less Team. "Getting started | Less.js". Less.js. Diakses tanggal 2021-03-19. 
  3. ^ "LESS (Stylesheet Language)". www.lasgondolas.es. Diakses tanggal 2023-10-27. 
  4. ^ Weizenbaum, Nathan (2009-06-17). "Sass and Less : Nex3". Diarsipkan dari versi asli tanggal 2009-06-21. Diakses tanggal 2021-03-19. 
  5. ^ 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. 
  6. ^ The Core Less Team. "About | Less.js". Less.js. Diakses tanggal 2021-03-19. 
  7. ^ Eppstein, Chris (2010-11-10). "sass_and_less_compared.markdown". GitHub Gist. Diakses tanggal 2021-03-19. 
  8. ^ Atwood, Jeff (2010-04-30). "What's Wrong With CSS". Coding Horror. Diakses tanggal 2022-12-03. 
  9. ^ Lagendijk, Mark (2013-01-29). "License Information · Issue #55 · marklagendijk/WinLess". GitHub. Diakses tanggal 2021-03-19. 
  10. ^ Dean, Matthew (2011-12-02). "Crunch/LICENSE.txt at master · matthew-dean/Crunch". GitHub. Diakses tanggal 2021-03-19. 
  11. ^ Smart, Duncan (2013-07-25). "less.js-windows/LICENSE at master · duncansmart/less.js-windows". GitHub. Diakses tanggal 2021-03-19. 
  12. ^ Engel, Christian (2012-07-29). "SimpLESS/LICENSE.txt at master · Paratron/SimpLESS". GitHub. Diakses tanggal 2021-03-19. 
  13. ^ 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. 
  14. ^ Vincent Simonet. "Eclipse plugin for LESS". normalesup.org. Diakses tanggal 2021-03-19. 
  15. ^ Kellen, Tyler (2012-09-04). "grunt-contrib-less/LICENSE-MIT at master · gruntjs/grunt-contrib-less". GitHub. Diakses tanggal 2021-03-19. 
  16. ^ Kristensen, Mads (2014-06-18). "WebEssentials2013/LICENSE.txt at master · madskristensen/WebEssentials2013". GitHub. Diakses tanggal 2021-03-19. 
  17. ^ Bram van der Kroef (2017-07-11). "clessc/LICENSE at master · BramvdKroef/clessc". GitHub. Diakses tanggal 2021-03-19. 
  18. ^ SamBrishes (2018-12-15). "snout.less/LICENSE.md at master · pytesNET/snout.less". GitHub. Diakses tanggal 2021-03-19. 

Pranala luar

sunting
Diperoleh dari "https://wiki-indonesia.club/w/index.php?title=Less&oldid=24669769"