Функции в LESS

В этом уроке мы рассмотрим, как использовать функции. Функции, чем-то похожи на примешивание, но при этом позволяют добавлять параметры, которые могут менять свои значения.

Эти параметры передаются в круглых скобках функции. Посмотрим на примере.

Давайте сделаем функцию fs, которая будет задавать размер шрифта. Пусть размер передается параметром. В качестве параметра будет выступать переменная, имя которой мы придумываем при объявлении функции:

styles.less.fs(@size) {
  // тут будет код функции
}

Давайте укажем внутри функции, куда должно вставится значение нашего параметра:

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

Вызовем нашу функцию, передав ей в качестве параметра желаемый размер элемента:

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

В результате после компиляции размер шрифта абзаца станет равен указанному значению:

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