LESS'te Fonksiyonlar

Bu derste, fonksiyonların nasıl kullanılacağını inceleyeceğiz. Fonksiyonlar, mixin'lere bir şekilde benzer, ancak aynı zamanda değerlerini değiştirebilen parametreler eklemeye izin verir.

Bu parametreler, fonksiyonun yuvarlak parantezleri içine iletilir. Bir örnek üzerinde inceleyelim.

Font boyutunu ayarlayacak bir fs fonksiyonu yapalım. Boyutun bir parametre olarak geçirilmesine izin verin. Parametre olarak, fonksiyonu tanımlarken adını bizim belirlediğimiz bir değişken kullanılacak:

styles.less.fs(@size) {
  // burada fonksiyonun kodu olacak
}

Fonksiyonun içinde, parametremizin değerinin nereye yerleştirileceğini belirtelim:

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

Fonksiyonumuzu, parametre olarak elemanın istediğimiz boyutunu ileterek çağıralım:

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

Sonuç olarak, derlemeden sonra paragrafın font boyutu belirtilen değere eşit olacak:

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