Мой Справочник | CSS3 | SCSS - Программирование

Лучше этим не злоупотреблядь

Условия
Примеси с условием
.mixin(@variable) when (@variable = 1) {
    // сделать что-то
}
/*Такая примесь применится, если «вызвать» её
с параметром 1. В противном случае примесь не
применится.*/
.mixin(@color) when (lightness(@color) > 50%) {
//сделать что-то, когда цвет светлее серого
}
.mixin(@color) when (lightness(@color) = 100%) {
//сделать что-то, когда цвет полностью белый
}
        
В примесях можно использовать полноценные условия, которые могут изменять поведение примеси в зависимости от значений входных параметров. Чтобы создать условие, нужно после названия примеси поставить ключевое слово when, за которым в скобках написать условную конструкцию.
В условной конструкции допускаются следующие операторы: >, >=, =, =<, <. Также допустимо использовать встроенные функции LESS, которые возвращают конкретные значения. К примеру, в LESS есть встроенная функция lightness, которая принимает в качестве параметра значение цвета и возвращает степень его светлоты. Чёрный цвет обладает 0% светлоты, а белый — 100%. Вот пример её использования:
Условия и внешние переменные
/* если создать примесь с условием,
но без параметров: */
.text-color() when (@theme = light) {
  color: white;
}
/* a потом создать внешнюю переменную
и вызвать где-то примесь: */
@theme: light;
.content {
    .text-color();
}
/*То условие выполнится, созданная
примесь отработает:*/
.content {
    color: white;
}

@type: good; /*bad*/ .paint() when (@type = good) { background-color: #7fdbff; } .paint() when (@type = bad) { background-color: #ff4136; } .monster-happy { .paint(); }
Условия в примесях могут работать не только с параметрами, с которыми «вызвана» примесь, но и с переменными, объявленными вне примесей. Например,
Условия и типы параметров
@red: #ff4136;
.magic(@parameter) when (iscolor(@parameter)) {
  background-color: @parameter;
}
.magic(@parameter) when (isnumber(@parameter)) {
  width: @parameter;
  height: @parameter;
}
.monster-happy {
  .magic(@red);
}
.monster-foolish {
  .magic(150px);
}
        
Все эти функции возвращают true, если переданный в них параметр соответствует проверяемому типу. Таким образом можно создать универсальную примесь, которая в зависимости от типа переданных параметров будет работать по-разному.
Циклы
Циклы
.mixin(@n) when (@n > 0) {
  .text-@{n} { }
  .mixin(@n - 1);
}
.mixin(3);

.text-3 {} .text-2 {} .text-1 {}
/* ПРИМЕР */ <div class="stair-1"></div> ... <div class="stair-10"></div>
@base-color: #ff4136; @base-width: 10px; .generate-stairs(@n) when (@n > 0) { .stair-@{n} { background-color: spin(@base-color, @n * -25); width: (@base-width * @n * 4.1); } .generate-stairs(@n - 1); } .generate-stairs(10);
Генерирования целых CSS-правил. Цикл исполняется три раза, в каждой итерации создастся правило с переменной-счётчиком @n в качестве суффикса селектора: