Википедија

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.; пре 8 година (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[1] Windows Compiler
Crunch Less editor and compiler (requires Adobe AIR) GPL[2] 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[3] 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[4] Windows
Mac OS X
Linux		 Compiler
Chirpy Архивирано на сајту Wayback Machine (21. април 2013) Less Compiler Ms-PL[5] 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[6] 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š

уреди

Reference

уреди
  1. ^ [1] WinLess github Issue "License Information"
  2. ^ Crunch's LICENSE.txt at github Crunch's LICENSE.txt at github
  3. ^ [2] github license
  4. ^ [3] license file at github (placeholder)
  5. ^ [4] Архивирано на сајту Wayback Machine (16. јун 2016) Chirpy License Information at CodePlex
  6. ^ Eclipse Plugin for Less homepage Eclipse Plugin for Less homepage

Spoljašnje veze

уреди
 
Less на Викимедијиној остави.
Преузето из „https://sr.wikipedia.org/w/index.php?title=Less&oldid=26758706”