Вендорные префиксы в LESS

Изначально одной из сильных сторон LESS было упрощение работы с вендорными префиксами. В настоящее время в новых браузерах от префиксов отказались, и скоро их использование совсем не будет нужно.

Пока, однако, иногда есть необходимость в использовании префиксов, поэтому приведу популярные примеры работы с ними через LESS.

Скругленные уголки

Давайте сделаем функцию, которая будет кроссбраузерно скруглять уголки:

.radius(@radius) {
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
	border-radius: @radius;
}

Воспольуемся нашей функцией:

div {
	.radius(10px);
}

Результат компиляции:

div {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

Тень блока

Давайте сделаем функцию, которая будет кроссбраузерно добавлять кроссбраузерную тень блоку:

.shadow(@s) {
	-moz-shadow+: @s;
	-webkit-shadow+: @s;
	box-shadow+: @s;
}

Воспользуемся созданной функцией:

p {
	.shadow(1px 10x red); 
	.shadow(2px 3px blue);
}

Посмотрим на результат компиляции:

p {
	-moz-shadow: 1px 10x red, 2px 3px blue;
	-webkit-shadow: 1px 10x red, 2px 3px blue;
	box-shadow: 1px 10x red, 2px 3px blue;
}

Трансформация

Давайте сделаем функции, которые будут кроссбраузерно задавать трансфоромации:

.rotate(@r) {
	-moz-transform+_: rotate(@r);
	-webkit-transform+_: rotate(@r);
	transform+_: rotate(@r);
}
.skew(@s) {
	-moz-transform+_: skew(@s);
	-webkit-transform+_: skew(@s);
	transform+_: skew(@s);
}

Воспольуемся нашими функциями:

div {
	.rotate(10deg);
	.skew(10deg);
}

Результат компиляции:

div {
	-moz-transform: rotate(10deg) skew(10deg);
	-webkit-transform: rotate(10deg) skew(10deg);
	transform: rotate(10deg) skew(10deg);
}

Плейсхолдер

Давайте сделаем функцию, которая кроссбраузерно будет добавлять стили плейсхолдеру:

.placeholder(@code) {
	&::-webkit-input-placeholder {
		@code();
	}
	&:-ms-input-placeholder {
		@code();
	}
	&::-moz-placeholder {
		@code();
	}
	&::placeholder {
		@code();
	}
}

Воспольуемся нашей функцией:

input {
	.placeholder({
		color: white; 
		background-color: red;
	});
}

Результат компиляции:

input::-webkit-input-placeholder {
	color: white; 
	background-color: red;
}
input::-ms-input-placeholder {
	color: white; 
	background-color: red;
}
input::-moz-placeholder {
	color: white; 
	background-color: red;
}
input::placeholder {
	color: white; 
	background-color: red;
}

Функция calc

Давайте сделаем функцию, которая реализует кроссбраузерную CSS функцию calc:

.calc(@name, @calc) {
	@{name}: -webkit-calc(@calc);
	@{name}: -moz-calc(@calc);
	@{name}: calc(@calc);
}

Воспольуемся нашей функцией:

div {
	.calc(width, ~'10px + 30%');
}

Результат компиляции:

div {
	width: -webkit-calc(10px + 30%);
	width: -moz-calc(10px + 30%);
	width: calc(10px + 30%);
}

Анимация

Давайте сделаем функцию, которая реализует кроссбраузерную команду @keyframes:

.keyframes(@name, @code) {
	@-o-keyframes @name {@code();}
	@-moz-keyframes @name {@code();}
	@-webkit-keyframes @name {@code();}
	@keyframes @name {@code();}
}

Воспользуемся нашей функцией:

.keyframes(anim, {
		from {
			width: 100px;
		}
		to {
			width: 200px;
		}
	}
);

Результат компиляции:

@-o-keyframes anim {
	from {
		width: 100px;
	}
	to {
		width: 200px;
	}
}
@-moz-keyframes	anim {
	from {
		width: 100px;
	}
	to {
		width: 200px;
	}
}
@-webkit-keyframes anim {
	from {
		width: 100px;
	}
	to {
		width: 200px;
	}
}
@keyframes anim {
	from {
		width: 100px;
	}
	to {
		width: 200px;
	}
}