Есть ли у LESS возможность «продления»?

94

В SASS есть функция, @extendкоторая позволяет селектору наследовать свойства другого селектора, но без копирования свойств (например, миксинов).

Есть ли у LESS эта функция?

css sass less extend Jonschlinkert
источник
Для пояснения, другие ссылки на вопросы НЕ задают то же самое. Это простой вопрос: «Есть ли у LESS расширенная функция?». Другой вопрос - это то, что требует гораздо большего обдумывания решений по стилю.
jonschlinkert
... чтобы добавить к моему последнему комментарию, другой вопрос включает тег "стиль кодирования", который еще больше подтверждает мою точку зрения.
jonschlinkert

Ответы:

158

Да, 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;
}
Jonschlinkert
источник
15
«Синтаксис LESS более« верен »традиционному CSS, чем @extendсинтаксис at-rule ( ), реализованный SASS и Stylus, который обычно зарезервирован для предоставления инструкций или директив синтаксическому анализатору CSS в браузере». <- что, черт возьми, это должно значить? Пахнет маркетингом.
cimmanon
1
давайте продолжим эту дискуссию в чате
Steveax
2
@cimmanon Думаю, ты прав, я не хотел, чтобы это так звучало. Но есть много споров о синтаксисе Less, по-видимому, потому, что люди ожидали, что Less будет использовать тот же синтаксис, что и SASS. Но в CSS псевдоселекторы используются для правил сопоставления с образцом, чтобы определить, какие правила стиля применяются к элементам в дереве документа, тогда как правила at используются для директив «более высокого уровня» (как я уже упоминал). Так, может быть, мне следует отредактировать ответ, чтобы указать эту деталь? Или это еще один вопрос: «Почему LESS выбрал синтаксис псевдоселектора?»
jonschlinkert
4
вам действительно стоит обновить документацию less онлайн, я ничего не вижу о: extend (), и было бы хорошо узнать раньше
Джошуа Бамбрик
2
Документация, как и код, поддерживается сообществом. Такие предложения было бы здорово иметь в реальном репо, и запросы на вытягивание всегда приветствуются ;-)
jonschlinkert
6

Простой способ расширить функцию в Less framework

.sibling-1 {
    color: red
}
.sibling-2 {
    background-color: #fff;
    .sibling-1();
}

Выход

.sibling-1 {
  color: red
}
.sibling-2 {
  background-color: #fff;
  color: red
}

См. Https://codepen.io/sprushika/pen/MVZoGB/

Спушика Мулакала
источник