Функции в Less CSS: руководство и примеры
Краткое введение в Less
Less CSS — это препроцессор CSS, который добавляет переменные, вложенность, миксины и функции поверх классического CSS. Если вы знакомы с «vanilla» CSS, переход к Less обычно не требует резкой пересадки — синтаксис близок, а преимущества ощутимы при работе с крупными стилевыми базами.
Определение: Функция — это блок кода, который принимает параметры, обрабатывает их и возвращает значение; в Less функции применяются прямо в местах определения свойств.
Важно: препроцессор работает на этапе сборки (или в браузере при подключении компилятора), поэтому итоговый браузерный CSS не содержит вызовов функций — остаются только вычисленные значения.
Что такое функции и зачем они нужны
В программировании функция выполняет определённую задачу и может быть вызвана многократно. Она снижает дублирование логики и улучшает читаемость. В Less это выражается в том, что вы можете вычислять значения, выбирать варианты по условию и манипулировать строками и списками прямо в стилях.
Пример на JavaScript (для понимания концепции, код оставлен как в исходнике):
function checkDiscount(price, threshold){
if (price >= threshold){
let discount = 5/100 * price;
return `Your discount is $${discount}`;
} else {
return `Sorry, this item does not qualify for a discount. `
}
}
Этот пример показывает общую идею: вы выносите логику в одну функцию и затем переиспользуете её.
Понимание функций в Less
В обычном CSS набор функций ограничен (например, calc()). Less добавляет более мощные функции: условные, строковые, для списков и т. д.
Пример использования calc в CSS (для сравнения):
p{
background-color: red;
width: calc(13px - 4px);
}
В Less есть функция if, принимающая условие и два результата:
@width: 10px;
@height: 20px;
div{
margin:if((@width > @height), 10px, 20px)
}
После компиляции получим:
div {
margin: 20px;
}
Пояснение: Less сравнивает значения и возвращает первый аргумент (10px), если выражение истинно, иначе — второй (20px).
Важно: Less выполняет сравнения в момент компиляции, поэтому условие должно быть вычислено до генерации итогового CSS.
Логические значения в Less
Boolean — это значение true или false. Функция boolean() позволяет преобразовать выражение в логическое значение и сохранить его в переменной:
@text-color: red;
@bg-color: boolean(@text-color = red);
Затем это значение можно использовать в условной конструкции:
div{
background-color: if(@bg-color,green,yellow);
}
Результат компиляции:
div {
background-color: green;
}
Замена текста в строке с помощью replace()
Синтаксис:
replace(string, pattern, replacement, flags)
- string — исходная строка;
- pattern — искомая подстрока или регулярное выражение;
- replacement — строка‑замена;
- flags — необязательный параметр для флагов регулярного выражения.
Пример:
@string: "Hello";
@pattern: "ello";
@replacement: "i";
div::before{
content: replace(@string,@pattern,@replacement)
}
После компиляции:
div::before {
content: "Hi";
}
Совет: при использовании регулярных выражений передавайте fourth‑параметр flags для глобального поиска или нечувствительности к регистру.
Функции для работы со списками
В Less список задаётся через запятые или пробелы:
@groceries: "bread", "banana", "potato", "milk";
length() возвращает количество элементов списка:
@result: length(@groceries);
extract() получает элемент по позиции (в Less индексация начинается с 1):
@third-element: extract(@groceries, 3);
range(start, end, step) генерирует список значений с шагом step (по умолчанию step = 1). В Less range чаще используется для генерации наборов значений, которые затем можно применить как шорткап для свойств с несколькими аргументами:
div {
margin: range(10px, 40px, 10);
}
Компиляция даст:
div {
margin: 10px 20px 30px 40px;
}
Пояснение: range начинает с 10px, затем 20px, 30px и заканчивает 40px.
Практический проект: простая страница с Less-функциями
Соберём всё вместе. Создайте папку с index.htm и style.less.
index.htm (фрагмент):
Document