Less

Less
Dirancang oleh	Alexis Sellier
Pengembang	Alexis Sellier, Dmitry Fadeyev
Rilis perdana	2009; 15 tahun lalu (2009)
Rilis stabil	4.2.0[1]  / 7 September 2023; 14 bulan lalu (7 September 2023)
Tipe sistem	Dinamis
Implementasi dari	JavaScript
Sistem operasi	Lintas platform
Lisensi	Apache License 2.0
Ekstensi nama berkas	.less
Situs web	lesscss.org
Repositori	lesscss.org
Terpengaruh oleh
CSS, Sass
Mempengaruhi
Sass, Less Framework, Bootstrap (v3)
Sunting kotak info • L • B

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]

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 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;
}

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;
}

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]

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.

• Situs web resmi