Необязательные параметры в функциях в LESS

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

Пусть у нас есть функция, зададающая цвет элемента:

.color(@c) {
	color: @c;
}

Сделаем так, чтобы параметр цвета был не обязателен и по умолчанию имел значение red:

.color(@c: red) {
	color: @c;
}

Давайте теперь вызовем нашу функцию с параметром:

div {
	.color(green);
}

А теперь вызовем нашу функцию без параметра:

div {
	.color();
}

Несколько параметров

Если функция имеет несколько параметров, то необязательные параметры должны располагаться в конце. Давайте посмотрим на примере.

Пусть у нас есть функция, зададающая цвет текста и одновременно цвет фона:

.color(@c1, @c2) {
	color: @c1;
	background-color: @c2;
}

Давайте сделаем так, чтобы второй параметр был не обязательным:

.color(@c1, @c2: white) {
	color: @c1;
	background-color: @c2;
}

А теперь давайте сделаем так, чтобы и первый параметр был не обязательным:

.color(@c1: black, @c2: white) {
	color: @c1;
	background-color: @c2;
}

Практические задачи

Сделайте функцию border, задающую границу. Пусть она принимает три параметра: толщину, цвет и тип границы. Пусть по умолчанию функция создает границу толщиной 1px, цветом black и типом solid.