Funktiot LESS:ssä

Tässä oppitunnissa tarkastelemme, kuinka käytetään funktioita. Funktiot muistuttavat jossain määrin sekoittamista, mutta antavat kuitenkin lisätä parametreja, jotka voivat muuttaa arvojaan.

Nämä parametrit välitetään funktion pyöreissä suluissa. Katsotaan esimerkkiä.

Tehdään funktio fs, joka asettaa fontin koon. Olkoon koko välitetty parametrina. Parametrina toimii muuttuja, jonka nimen keksimme funktion määriteltäessä:

styles.less.fs(@size) {
  // tässä on funktion koodi
}

Määritetään funktion sisälle, minne parametrimme arvo tulisi lisätä:

styles.less.fs(@size) {
  font-size: @size;
}

Kutsutaan funktiotamme välittämällä sille parametrina haluttu elementin koko:

styles.lessp {
  .fs(20px);
}

Tuloksena kääntämisen jälkeen fontin koko kappaleesta on yhtä suuri kuin määritetty arvo:

styles.cssp {
  font-size: 20px;
}