Less миксины - Блог Фронтендера

CSS-препроцессор LESS: Миксины(Урок 4)

Список уроков по данной теме:

LESS миксины (примеси):

Еще один очень удобный инструмент в less это миксины (примеси)

Называются они так, потому что содержат в себе несколько css свойств.

Давайте детальнее рассмотрим такие темы, как:

  1. Создание миксинов
  2. Применение миксинов
  3. Миксины с параметрами

1. Создание миксинов

Для того что бы создать less миксин вам нужно задать ему имя и перечислить css свойства.

Выглядит это следующим образом:

.name {
 property1: value1;
 property2: value2;
}


где:

. (точка) — ставится перед началом имени миксина (как класс в css),

name — имя миксина (любое, произвольное),

property — css свойство,

value — значение css свойства

Примеры less миксинов:

.title {
 font-size: 34px;
 color: #222
}

.subtitle {
 font-size: 22px;
 color: #eee;
}

Если вы зададите миксин данным способом, то после компиляции less у вас в css коде появятся точно такие же строки

Однако есть метод, при котором в css коде не будет упоминание о миксине. Для этого нужно после имени миксина поставить скобки:

.title() {    // из за скобок () миксин не отобразится в css
 font-size: 34px;
 color: #222
}

2. Использование миксинов

Для того что бы присвоить элементу созданный вами less миксин (набор css свойств) нужно прописать этот миксин как css свойство:

// создаём миксин

.title() {
 font-size: 42px;
 color: #ff6a6a;
}

// применяем миксин

h1 {
 .title;
 margin: 0 0 30px 0;
}

После компиляции нашего less кода у нас получится:

h1 {
 font-size: 42px;
 color: #ff6a6a;
 margin: 0 0 30px 0;
}

3. Миксины с параметрами

Подобно функциям в языках программирования, в less миксинам можно передавать аргументы.

Миксин, в который передали аргумент, называют миксин с параметрами

Выглядит это следующим образом:

.name (@argument) {
 property1: @argument;
 property2: value2;
}

Например:

.avatar (@size) {
 height: 100px;
 width: @size;
}

Теперь применим данный миксин:

.blockImage {
 .avatar(50px);
 margin: 0;
}

После компиляции less кода получим:

.blockImage {
 height: 100px;
 width: 50px;
 margin: 0;
}

Значение параметра по умолчанию:

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

.avatar (@size : 20px) {
 height: 100px;
 width: @size;
}

Если теперь вы зададите элементу миксин .avatar не передав в него значение аргумента, то по умолчанию ширина станет 20px

Несколько параметров в less миксин:

Миксину можно задавать любое количество параметров через запятую

Пример:

.box (@sizeW:100px, @sizeH: 100px, @textColor) {
 height: @sizeH;
 width: @sizeW;
 color: @textColor;
}

Параметром миксина может стать и less переменная

// создаём простой миксин

.box (@textColor) {
 color: @textColor;
}

// создаём less переменную

@green: #00ff2a;

// передаём в миксин less переменную

div {
 .box(@green);
}

После компиляции получаем:

div {
 color: #00ff2a;
}

Заключение

Less миксины (примеси) — это набор css свойств.

В миксины так же можно подставлять параметры и использовать в качестве этого less переменные.

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