Саша Бизиков

Младший дизайнер в ФанБоксе. Делал интерфейсы бизнес-процессов для сотрудников банка Тинькофф. Изучаю дизайн мобильных приложений и редактуру текста.

Эффективное использование 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;
}

/* Пример использования */
.element{
    .box-sizing;
}

Не обязательно использовать все миксины в одном проекте, достаточно добавить в LESS-файл только те, которые вам точно пригодятся.
Для удобства список всех миксинов вынес в mixin.less.

Приятой верстки!

Обновил: добавил миксины .opacity и box-sizing.

Ещё


  • Дмитрий

    Всё, что тут написано, достигается использованием банального autoprefixer, миксины для этого не нужны.

    • Верно. Когда заметка была написана, о PostCSS и autoprefixer не знал.

    • Игорь Косолапов

      А если используется виртуальный хостинт и на нем нет возможности установить систему сборки и соответственно PostCSS с расширением autoprefixer… Или есть какое-то решение без установки системы сборки, типа Gulp и т.п.?