• Теория
  • Теория

Примеси

Ещё одна интересная возможность Less — примеси. Мы можем «примешивать» содержимое одного CSS-правила в другое. Для этого нужно написать имя «примешиваемого» правила внутри другого правила. Рассмотрим пример:

Less.white { color: white; } /* объявление примеси */
.text { .white; }    /* применение примеси */

Этот Less-код скомпилируется в такой CSS:

CSS.white { color: white; }
.text { color: white; }

Как мы видим, в правиле, где была «вызвана» примесь .white, появилось её содержимое.

Чтобы не выводить саму примесь в CSS, нужно после объявления примеси поставить скобки:

Less.white() { color: white; } /* объявление невыводимой примеси */
.text { .white; }      /* применение примеси */
CSS.text { color: white; }

При применении примеси скобки писать необязательно.

Less/* Эти выражения дают один и тот же результат: */
.mixin();
.mixin;

Хотите научиться профессионально писать код на самом востребованном языке программирования? Записывайтесь на профессию «React-разработчик», которая стартует 20 мая 2024. Всего от 4130 ₽в месяц.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Примеси в Less» тренажёра «Инструменты автоматизации: препроцессор» можно после регистрации и оформления подписки.