Less

Less (kirjapilt võib olla ka LESS) on dünaamiline laadilehekeel, mida on võimalik kompileerida CSS-iks ja jooksutada nii kliendi- kui ka serveripoolel.

Less
Autor	Alexis Sellier
Esmaväljalase	2009
Viimane väljalase	3.4.22 / 28. märts 2016
Litsents	Apache Licence 2
Veebisait	http://lesscss.com/

Less loodi 2009. aastal Alexis Sellier' algatusel. Lessi loomisel saadi väga palju inspiratsiooni Sassist, kuid erinevalt Sassist kasutas Less rohkem CSS-i sarnast süntaksit (hiljem võttis Sass eeskuju omakorda Lessist ning lõi CSS-i sarnase süntaksi SCSS). Less on avatud lähtekoodiga. Esimene versioon tarkvarast kirjutati programmeerimiskeeles Ruby, kuid hilisemates versioonides kasutatakse Ruby asemel JavaScripti.

Legaalne CSS on ka legaalne LESS, kuid vastupidine ei pruugi kehtida. Seega kasutab Less CSS-iga väga sarnast süntaksit. Less pakub kasutajale järgnevaid mehhanisme: muutujad, pesastamine, operaatorid, funktsioonid ja mikserid (ingl mixin). Peamine erinevus Lessi ja teiste sarnaste eelprotsessorite (ingl preprocessor) vahel on asjaolu, et Less kompileerib koodi reaalajas.

Muutujad

Less lubab muutujaid deklareerida. Muutujad on Lessis defineeritud ätt-märgiga (@). Muutujaid väärtustatakse kasutades koolonit (:). Muutujate väärtustamisel võib sarnaselt paljude programmeerimiskeeltega kasutada ka juba olemasolevaid muutujaid. Transleerimise käigus asendatakse muutujad vastavate väärtustega ning väljastatakse legaalne CSS-dokument.

// Variables
@link-color:        #428bca; // sea blue
@link-color-hover:  darken(@link-color, 10%);

// Usage
a,
.link {
  color: @link-color;
}
a:hover {
  color: @link-color-hover;
}

Ülevalolev kood kompileeritaks järgnevasse CSS-koodi:

a,
.link {
  color: #428bca;
}
a:hover {
  color: #3472a7;
}

Esialgses koodis kasutatakse ka funktsiooni Darken, mis muudab etteantud värvi teatud protsendi võrra tumedamaks. Sarnaseid funktsioone leidub Lessis palju. Täpsemalt tuleb sellest juttu funktsioonide alapeatükis.

Mikserid

Mikserid on üks Lessi kasutatavamaid omadusi. Miksimine võimaldab ühe klassi seest teisi klasse välja kutsuda sarnase süntaksiga, nagu paljudes programmeerimiskeeltes funktsioone välja kutsutakse. Seetõttu saab korduvat koodi oluliselt vähendada ning olemasolevat koodi uuesti kasutada.

.a, #b {
  color: red;
}
.mixin-class {
  .a();
}
.mixin-id {
  #b();
}

Ülevalolev kood kompileeritaks järgnevasse CSS-koodi. Sulud klassi nimetuse taga on vabatahtlikud. Võib olla nii .a() kui ka .a.

.a, #b {
  color: red;
}
.mixin-class {
  color: red;
}
.mixin-id {
  color: red;
}

Miksimisega saab klassile ette anda ka parameetreid. Näiteks võime defineerida järgneva klassi "border-radius", mis võtab sisse ühe parameetri.

.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

Kasutada saame klassi näiteks järgnevalt:

#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}

Funktsioonid ja tehted

Lessiga on võimalik kasutada eri funktsioone ja teha erinevaid tehteid.

Legaalsed tehted:

• liitmine
• lahutamine
• jagamine
• korrutamine

Tehteid saab teha nii numbriliste väärtustega kui ka näiteks kuueteistkümnendsüsteemis olevate värvikoodidega.

Näide funktsioonide ja operaatorite kasutamisest:

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

Ülevalolev kood kompileeritaks järgnevasse CSS-koodi.

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