Less

Allikas: Vikipeedia
Jump to navigation Jump to search
Less
LESS Logo.svg
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 (kirjapilt võib olla ka LESS) on dünaamiline laadilehekeel, mida on võimalik kompileerida CSS-iks ja jooksutada nii kliendi- kui ka serveripoolel[1].

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.[2]

Legaalne CSS on ka legaalne LESS, kuid vastupidine ei pruugi kehtida. Seega kasutab Less CSS-iga väga sarnast süntaksit[3]. 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.[1][3]

Muutujad[muuda | muuda lähteteksti]

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.[4]

// 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.[5] Täpsemalt tuleb sellest juttu funktsioonide alapeatükis.

Mikserid[muuda | muuda lähteteksti]

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.[6]

.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.[6]

.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.[6]

.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[muuda | muuda lähteteksti]

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.[7]

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;
}

Viited[muuda | muuda lähteteksti]

  1. 1,0 1,1 "Lessi ametlik veebileht". Kasutatud 19.03.2018.
  2. "Lessi ametlik veebileht - "About" sektsioon". Kasutatud 19.03.2018.
  3. 3,0 3,1 "Sass ja Less". Nex3. Archived by Webback Machine. Kasutatud 19.03.2018.
  4. "Lessi ametlik veebileht - Muutujad". Kasutatud 20.03.2018.
  5. "Lessi ametlik veebileht - Funktsioonid". Kasutatud 20.03.2018.
  6. 6,0 6,1 6,2 "Lessi ametlik veebileht - Mikserid". Kasutatud 20.03.2018.
  7. "Lessi ametlik veebileht - Funktsioonid". Kasutatud 20.08.2018.