LESS миксины: используем правильно

Независимо от сложности проекта, всегда хочется сверстать тему красиво, быстро, просто и понято. Для этого можно (и нужно) использовать динамические языки стилей, одним из которых является LESS. В свое время этому CSS-препроцессору будет посвящена отдельная статья, а сегодня мы просто остановимся на одном из его самых интересных расширений: миксинах (mixins), которые еще называют примесями.

Миксины -- это наборы типовых правил, которые можно применять к любому объекту или элементу. Например:

.position {
 position: absolute;
 top: 0;
 left: 0;
}

Применяем миксин следующим образом:

div.someblock1 { color: #000; .position; }
div.someblock2 { background: #fff; .position; }

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

.setbg(@color) {
 padding: 1rem;
 background-color: @color;
 border-radius: 3px;
}

Используется такой миксин следующим образом:

div.someblock3 { .setbg(#000); }

Количество переменных в миксине может быть произвольным:

.setbg(@color, @border) {
 padding: 1rem;
 background-color: @color;
 border-radius: @border;
}

Используем:

div.someblock3 { .setbg(#000, 3px); }

Переменные миксинов могу получать значения по умолчанию:

.setbg(@color: #000, @border: 3px) {
 padding: 1rem;
 background-color: @color;
 border-radius: @border;
}

Если значения по умолчанию в конкретном контексте вас устраивает, для миксинов, определенных таким образом, их можно не указывать:

div.someblock4 { .setbg; }

На сегодня все. Тему LESS и миксинов продолжим в следующий раз.