Передача наборов правил примесям. Отдельный набор правил
Отдельный набор правил – это группа свойств CSS, внутренних наборов правил, медиа-декларирований, а также чего-либо другого, содержащегося в переменной.
Вы можете включить его в набор правил или другую структуру, все свойства при этом туда скопируются. Вы также можете использовать его как аргумент примеси и переопределить как любую переменную. Появилось в v1.7.0. Простой пример:
// объявление отдельного набора правил
@detached-ruleset: { background: red; };
// использование отдельного набора правил
.top {
@detached-ruleset();
}
компилируется в:
.top {
background: red;
}
Круглые скобки после вызова отдельного набора правил ставятся обязательно. Такой вызов работать НЕ будет: @detached-ruleset;
.
Это полезно, если вы хотите определить примесь, которая извлекает либо переносимый кусок кода в медиа-запросе, либо имя класса, не поддерживаемое браузером. Наборы правил могут передаваться в примесь так, чтобы примесь могла перенести содержимое, например:
.desktop-and-old-ie(@rules) {
@media screen and (min-width: 1200){@rules();}
html.lt-ie9 & {@rules();}
}
header {
background-color: blue;
.desktop-and-old-ie({
background-color: red;
});
}
Здесь примесь desktop-and-old-ie
определяет медиа-запрос и класс корня так, что вы можете использовать примесь для переноса части кода. На выводе получится:
header {
background-color: blue;
}
@media screen and (min-width: 1200) {
header {
background-color: red;
}
}
html.lt-ie9 header {
background-color: red;
}
Набор правил теперь можно присвоить переменной, или передать примеси. Он может содержать полный набор функций Less, например
@my-ruleset: {
.my-selector {
background-color: black;
}
};
Вы также можете воспользоваться преимуществами всплывающих медиа-запросов:
@my-ruleset: {
.my-selector {
@media tv {
background-color: black;
}
}
};
@media (orientation:portrait) {
@my-ruleset();
}
На выводе получим:
@media (orientation: portrait) and tv {
.my-selector {
background-color: black;
}
}
Вызов отдельного набора правил открывает (возвращает) все свои примеси так же, как это делают сами примеси. Но переменные при этом не возвращаются.
Возвращенная примесь:
// отдельный набор правил с примесью
@detached-ruleset: {
.mixin() {
color:blue;
}
};
// call detached ruleset
.caller {
@detached-ruleset();
.mixin();
}
Мы получили вот такой CSS:
.caller {
color: blue;
}
Публичные переменные:
detached-ruleset: {
@color:blue; // это приватная переменная
};
.caller {
color: @color; // синтаксическая ошибка
}