Эффективное использование mixin в LESS
Я люблю LESS. Правда. Это очень клевая штука, которая позволяет упростить написание CSS. В этой записи пойдет речь о Mixin. О том, что это такое, я уже писал в одной из предыдущих записей про LESS.
Для меня использование CSS3 уже не является каким-то ноу-хау. За пару лет практически во всех (пламенный привет IE) браузерах внедрили поддержку, если не всех, то очень многих свойств, присутствующих в CSS3.
Но несмотря на это, лучше подстраховаться и верстать кроссбраузерно, используя браузерные префиксы. Ниже привожу список миксинов для различных свойств с уточняющими комментариями.
Градиент
Задаем линейный градиент для элемента:
.gradient(@from: #000, @to: #fff) { background-color: @from; background-image: -webkit-gradient(linear, left top, left bottom, from(@from), to(@to)); background-image: -webkit-linear-gradient(top, @from, @to); background-image: -moz-linear-gradient(top, @from, @to); background-image: -o-linear-gradient(top, @from, @to); background-image: linear-gradient(to bottom, @from, @to);}/* Пример использования */@color: #E0F8D8;.element{ /* Фон с градиентом цвета от #E0F8D8 и до #9BE882 */ .gradient(@color, darken(@color,20%));}
Box-shadow
Добавляем тень к элементу. Добавлять тень можно внешнюю и внутреннюю. Если @insert
задать значение true
, то элементу задается внутреняя тень.
/* Внутреняя тень */.box-shadow(@insert, @x: 0, @y: 0, @blur: 10px, @color: #666) when (@insert = true) { -webkit-box-shadow: inset @x @y @blur @color; box-shadow: inset @x @y @blur @color;}/* Внешняя тень */.box-shadow(@insert, @x: 0, @y: 0, @blur: 10px, @color: #666) when (@insert = false) { -webkit-box-shadow: @x @y @blur @color; box-shadow: @x @y @blur @color;}/* Упрощенный вариант использования внейшей тени */.box-shadow(@x: 0, @y: 0, @blur: 10px, @color: #666){ -webkit-box-shadow: @arguments; box-shadow: @arguments;}/* Пример использования *//* Внутреняя тень */.element{ .box-shadow(false, 2px, 2px, 20px, #999);}/* Если не указать @insert, то сгенерируется внешняя тень */.element{ .box-shadow(1px, 2px, 20px, #000);}
Text-shadow
Добавляем тень к тексту:
.text-shadow(@x: 1px, @y: 1px, @radius: 2px, @color: #000){ -webkit-text-shadow: @arguments; -moz-text-shadow: @arguments; text-shadow: @arguments;}/* Пример использования */.element{ .text-shadow;}
Border-radius
Задаем радиус скругления элемента:
.border-radius(@r: 3px) { -webkit-border-radius: @r; -moz-border-radius: @r; border-radius: @r;}/* Пример использования */.element{ .border-radius(10px);}
Column
@count
— определяет количество колонок в многоколоночном тексте, а @gap
задаёт расстояние между колонками.
.column(@count: 3, @gap: 1em) { -webkit-column-count: @count; -webkit-column-gap: @gap; -moz-column-count: @count; -moz-column-gap: @gap; column-count: @count; column-gap: @gap;}/* Пример использования */.element{ /* Текст будет разбит на две колонки, отступ между ними будет составлять 1.8em */ .column(2, 1.8em);}
Transition
Устанавливаем эффект перехода между двумя состояниями элемента (например обычным состоянием и :hover
):
.transition(@property: all, @duration: 0.3s, @function: linear) { -webkit-transition: @arguments; -moz-transition: @arguments; -o-transition: @arguments; transition: @arguments;}/* пример использования */a { color: #008dd2; text-decoration: none; .transition(color, 0.2s, linear); &:hover { text-decoration: none; color: #1a171b; }}
Transform
Трансформируем элемент, в частности, можем его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций.
.transform(@value) { -webkit-transform: @value; -moz-transform: @value; -ms-transform: @value; -o-transform: @value; transform: @value;}/* Пример использования *//* Увеличим элемент в два раза */.element{ .transform(scale(2,2));}/* Изменение элемента при наведении */.element{ /* Для плавности добавим .transition */ .transition; &:hover{ .transform(scale(2,2)); }}/* Необходимо при наведении не только увеличить элемент, но и повернуть его на 10 градусов? Легко!*/.element{ .transition; &:hover{ .transform(rotate(10deg) scale(2,2)); /* (!) Запятую между функциями ставить не нужно */ }}
Opacity
Задаем прозрачность элементу:
.opacity (@opacity: 0.5) {
-webkit-opacity: @opacity;
-moz-opacity: @opacity;
opacity: @opacity;
}
/*
Пример использования
При наведении элемент становится прозрачным
*/
.element {
.opacity(1);
&:hover{
.opacity(0.8)
}
}
Box sizing
Свойство применяется для изменения алгоритма расчета ширины и высоты элемента.
.box-sizing (@type: border-box) {
-webkit-box-sizing: @type;
-moz-box-sizing: @type;
box-sizing: @type;
}
Не обязательно использовать все миксины в одном проекте, достаточно добавить в LESS-файл только те, которые вам точно пригодятся. Для удобства список всех миксинов вынес в mixin.less.
Приятой верстки!
Всё, что тут написано, достигается использованием банального autoprefixer, миксины для этого не нужны.
Верно. Когда заметка была написана, о PostCSS и autoprefixer не знал.
А если используется виртуальный хостинт и на нем нет возможности установить систему сборки и соответственно PostCSS с расширением autoprefixer… Или есть какое-то решение без установки системы сборки, типа Gulp и т.п.?