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. Less dirancang oleh Alexis Sellier, seorang pengembang perangkat lunak asal Prancis. Less memiliki pengaruh dari Sass dan bahkan memengaruhi perkembangan sintaks "SCSS" dalam Sass. 

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.

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

 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 lunakLisensiPlatformFungsiWinLess - Windows GUI for less.jsApache 2.0WindowsCompilerCrunchGPLWindows, Mac OS XCompiler
Editorless.js-windowsMIT LicenseWindowsCompilerless.appProprietaryMac OS XCompilerCodeKitProprietaryMac OS XCompilerLessEngineFreeOpenCart PluginCompilerSimpLESSfree but no explicit licenseWindows
Mac OS X
LinuxCompilerChirpyMs-PLVisual Studio PluginCompilerMindscape Web WorkbenchProprietaryVisual Studio PluginCompiler
Syntax HighlightingEclipse Plugin for LessEPL 1.0Eclipse PluginSyntax highlighting
Content assist
Compilermod_lessOpen SourceLinuxCompilergrunt-contrib-lessMITNode.jsCompilerWeb EssentialsApache 2.0 WindowsSyntax highlighting, Content assist, CompilerclesscMITat least Windows, Linux, MacOSCompilerLess WebCompilerMITat least Windows, Linux, MacOSCompiler, Syntax highlighting, Minifier

 Referensi 

 Pranala luar 



Kategori:Bahasa pemrograman
Kategori:Pemrograman web
Kategori:Pengembang web