Less

Less (u nekim izvorima i kao LESS) je dinamički jezik za obeležavanje koji može biti u sastavu Cascading Style Sheets (CSS), a može biti pokrenut od strane klijenta i od strane servera. Less je dizajnirao Aleksis Selije po ugledu na Sass, dok je Less imao uticaja na noviju, “SCSS” sintaksu Sass-a koja ima prilagođenu sintaksu kao CSS, u vidu blokova. Prva verzija Less-a je napisana u Ruby, dok su poslednje verzije pisane u JavaScript. Less predstavlja ugnježdeni metajezik. Validan CSS kod je takođe i validan Less kod sa istom semantikom. Less obezbeđuje sledeće mehanizme: promenljive, ugnježdene petlje, mixin, operatore i funkcije. Glavna razlika između Less-a i ostalih CSS pretprocesora je ta što Less dopušta kompilaciju u tzv. realnom vremenu, koristeći less.js od strane pregledača.

Less
Less лого
Оригинални назив	енгл. Less
Изговара се	Лес
Појавио се	2009.
Аутор(и)	Алексис Селије и Димитри Фадејев
Дизајнер(и)	Алексис Селије
Актуелна верзија	2.7.1
Датум актуелне верзије	9. мај 2016. год. (2016-05-09)
Систем типова	динамички
Имплементације	ЈаваСкрипт
Утицаји	CSS, Sass
Утицао на	Sass, Less фрејмворк, Bootstrap
Оперативни системи	Више платформи
Лиценца	Апач 2
Веб-сајт	lesscss.org

Promenljive

Less dozvoljava definisanje promenljivih. Promenljive se definišu koristeci znak (@). Zadatak promenljive je završen sa znakom (:).

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

Prethodni kod u Less-u bi odgovarao narednom kodu u CSS-u:

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

Mixins

Mixins dopuštaju ugradnju svih svojstava jedne klase u drugu klasu, koristeći ime klase kao jedno od svojstava, tako da se ponašaju kao konstante ili promenljive. Ovaj mehanizam takođe oponaša i funkcije, koristeći argumente. CSS ne podržava ovo svojstvo. Ponovljeni kod mora biti ponovljen na svakoj poziciji. Osnovna prednost je što ovaj mehanizam omogućava efikasnost, kao i jednostavne izmene koda.

.rounded-corners (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

Prethodni kod u Less-u bi odgovarao narednom kodu u CSS-u:

#header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
#footer {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

Ugnježdene petlje

CSS podržava lokalne ugnježdene petlje, ali blokovi koda sami po sebi nisu ugnježdene petlje. Less dopušta ugnježdene petlje ili selektore unutar drugih selektora, što omogućava jednostavno nasleđivanje i kraći kod.

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { 
    font-size: 12px;
    a { 
      text-decoration: none;
      &:hover { 
        border-width: 1px;
      }
    }
  }
}

Prethodni kod u Less-u bi odgovarao narednom kodu u CSS-u:

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

Funkcije i operatori

Less dopušta korišćenje funkcija i operatora. Operacije koje se koriste su sabiranje, oduzimanje, množenje i deljenje vrednosti i boja, što se koristi kako bi se stvorila kompleksna veza između svojstava.

@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%);
}

Prethodni kod u Less-u bi odgovarao narednom kodu u CSS-u:

#header {
  color: #333;
  border-left: 1px;
  border-right: 3px;
}
#footer { 
  color: #114411;
  border-color: #7d2717;
}

Poređenje

Sass

I Sass i Less su CSS pretprocesori koji omogućavaju čisto pisanje CSS koda umesto statičkih pravila.

Od verzije Less 1.4, Less podržava ugnježdena, nasleđena pravila kroz &:extends i @extends pseudo-selektore. Pre toga, glavna razlika između Less-a i ostalih pretprocesora poput Sass-a bila je nedostatak direktive @extends koja omogućava nasleđivanje između klasa, da bi se dobio što čistiji CSS kod sa što manje duplikata.

LESS je inspirisan Sass-om. Sass je napravljen sa ciljem da uprosti, ali i da proširi CSS, pa su neke stvari uklonjene iz sintakse. Less je dizajniran da bude što sličniji CSS-u, tako da je sintaksa identična kao u CSS-u. Kao rezultat ove sličnosti, postojeći CSS kod može se koristiti i kao validan Less kod.

Novije verzije Sass-a koje su upoznate sa sintaksom CSS-a se nazivaju SCSS.

Za više informacija o ovome, pogledajte https://gist.github.com/674726.

Upotreba na sajtu

Less se može primeniti na sajtove na mnogo različitih načina. Jedan od načina je da sadrži less.js JavaScript fajl, gde zatim pretraživač generiše izlazni CSS. Druga opcija je da se od Less koda napravi čist CSS kod na sajtu. Koristeći ovu opciju ne postavljaju se .less fajlovi i sajtu nije potreban less.js JavaScript konverter.

Less softveri

Name	Description	Software License	Platform	Functionality
WinLess	GUI Less Compiler	Apache 2.0	Windows	Compiler
Crunch	Less editor and compiler (requires Adobe AIR)	GPL	Windows, Mac OS X	Compiler Editor
less.js-windows	Simple command-line utility for Windows that will compile *.less files to CSS using less.js.	MIT License	Windows	Compiler
less.app	Less Compiler	Proprietary	Mac OS X	Compiler
CodeKit	Less Compiler	Proprietary	Mac OS X	Compiler
LessEngine	Less Compiler	Free	OpenCart Plugin	Compiler
SimpLESS Архивирано на сајту Wayback Machine (29. јул 2013)	Less Compiler	free but no explicit license	Windows Mac OS X Linux	Compiler
Chirpy Архивирано на сајту Wayback Machine (21. април 2013)	Less Compiler	Ms-PL	Visual Studio Plugin	Compiler
Mindscape Web Workbench	Syntax highlighting and IntelliSense for Less and Sass	Proprietary	Visual Studio Plugin	Compiler Syntax Highlighting
Eclipse Plugin for Less	Eclipse Plugin	EPL 1.0	Eclipse Plugin	Syntax highlighting Content assist
mod_less	Apache2 module to compile Less on the fly	Open Source	Linux	Compiler
grunt-contrib-less	Node.js Grunt task to convert Less to CSS	Open Source	Node.js	Compiler
Web Essentials Архивирано на сајту Wayback Machine (11. новембар 2016)	Visual Studio extension with support for Less and Sass	Apache 2.0	Windows	Syntax highlighting, Content assist, Compiler

Vidi još

• Sass (stylesheet language)
• Stylus (stylesheet language)

Spoljašnje veze

• Званични веб-сајт
• Less source code repository (Git)
• LESS Hat mixins library
• Sai the mixins extension and CSS authoring framework for LESS & SASS/SCSS (Git)