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.
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 WinLess github Issue "License Information" Windows Compiler Crunch Less editor and compiler (requires Adobe AIR) GPLCrunch's LICENSE.txt at github Crunch's LICENSE.txt at github Windows, Mac OS X CompilerEditor less.js-windows Simple command-line utility for Windows that will compile *.less files to CSS using less.js. MIT License github 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 Less Compiler free but no explicit license license file at github (placeholder) WindowsMac OS XLinux Compiler Chirpy Less Compiler Ms-PL Chirpy License Information at CodePlex Visual Studio Plugin Compiler Mindscape Web Workbench Syntax highlighting and IntelliSense for Less and Sass Proprietary Visual Studio Plugin CompilerSyntax Highlighting Eclipse Plugin for Less Eclipse Plugin EPL 1.0Eclipse Plugin for Less homepage Eclipse Plugin for Less homepage Eclipse Plugin Syntax highlightingContent 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 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)
Reference
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)
Категорија:Стилски језици (програмирање) Категорија:ЈаваСкрипт библиотеке Категорија:Бесплатне рачунарске библиотеке Категорија:Софтвер са Апач лиценцом