В SASS есть функция, @extend
которая позволяет селектору наследовать свойства другого селектора, но без копирования свойств (например, миксинов).
Есть ли у LESS эта функция?
В SASS есть функция, @extend
которая позволяет селектору наследовать свойства другого селектора, но без копирования свойств (например, миксинов).
Есть ли у LESS эта функция?
Ответы:
Да, Less.js появился extend
в v1.4.0 .
:extend()
Вместо реализации @extend
синтаксиса at-rule ( ), используемого SASS и Stylus, LESS реализовал синтаксис псевдокласса, который дает реализации LESS гибкость, которую можно применять либо непосредственно к самому селектору, либо внутри оператора. Итак, оба они будут работать:
.sidenav:extend(.nav) {...}
или
.sidenav {
&:extend(.nav);
...
}
Кроме того, вы можете использовать эту all
директиву для расширения «вложенных» классов:
.sidenav:extend(.nav all){};
И вы можете добавить список классов, которые вы хотите расширить, через запятую:
.global-nav {
&:extend(.navbar, .nav all, .navbar-fixed-top all, .navbar-inverse);
height: 70px;
}
При расширении вложенных селекторов вы должны заметить различия:
вложенные селекторы .selector1
и selector2
:
.selector1 {
property1: a;
.selector2 {
property2: b;
}
}
Теперь .selector3:extend(.selector1 .selector2){};
выводит:
.selector1 {
property1: a;
}
.selector1 .selector2,
.selector3 {
property2: b;
}
, .selector3:extend(.selector1 all){};
выходы:
.selector1,
.selector3 {
property1: a;
}
.selector1 .selector2,
.selector3 .selector2 {
property2: b;
}
, .selector3:extend(.selector2){};
выходы
.selector1 {
property1: a;
}
.selector1 .selector2 {
property2: b;
}
и наконец .selector3:extend(.selector2 all){};
:
.selector1 {
property1: a;
}
.selector1 .selector2,
.selector1 .selector3 {
property2: b;
}
@extend
синтаксис at-rule ( ), реализованный SASS и Stylus, который обычно зарезервирован для предоставления инструкций или директив синтаксическому анализатору CSS в браузере». <- что, черт возьми, это должно значить? Пахнет маркетингом.
.sibling-1 {
color: red
}
.sibling-2 {
background-color: #fff;
.sibling-1();
}
Выход
.sibling-1 {
color: red
}
.sibling-2 {
background-color: #fff;
color: red
}