Переопределение примесей в LESS

при определении миксина несколько раз в LESS и последующем вызове этого миксина следующим образом

.background-color() {
    background: red;
}

.background-color() {
    background: yellow;
}

body {
    .background-color;
}

результатом будет комбинированный вывод всех определенных миксинов

body {
  background: red;    // << output from mixin #1
  background: yellow; // << output from mixin #2
}

в то время как когда вы применяете один и тот же сценарий как в Sass, так и в Stylus (конечно, используя их собственный синтаксис), когда вы вызываете миксин, который определен несколько раз в ваших таблицах стилей, будет выполнен только последний определенный. (он переопределит все ранее определенные миксины) следующим образом.

результат Sass и Stylus

body {
  background: yellow; // << output from mixin #2
}

как я могу переопределить миксин в LESS, чтобы вывод был из последнего определенного миксина?


less less-mixins
person Anas Nakawa    schedule 23.11.2014    source источник
comment
Я никогда не использовал less, но зачем вам два миксина с одинаковыми именами? Похоже, что в меньшем количестве, когда вы снова используете одно и то же имя, оно просто объединяет правила.   -  person XCS    schedule 23.11.2014
comment
@Cristy для многотемных архитектурных целей, где базовая тема будет содержать все необходимые переменные и примеси, а при создании дочерней темы у вас будет возможность переопределить базовые переменные/примеси или просто наследовать базовые.   -  person Anas Nakawa    schedule 23.11.2014
comment
Less наследует свою семантику от CSS, где набор правил не переопределяет предыдущие наборы правил с тем же именем/селектором, а каскадируется. Хотя, если эти базовые примеси написаны вами и, таким образом, могут быть изменены, вы можете использовать default guard для достижения желаемого. Но в целом да, вы должны использовать разные идиомы/дизайн-шаблоны для своих библиотек, так как Less — это принципиально другой язык помимо некоторых базовых вещей.   -  person seven-phases-max    schedule 24.11.2014
comment
Несмотря на то, что вывод фона дважды (красный, а затем желтый) не так хорошо читается позже, я думаю, что он будет работать правильно при применении в браузере, поскольку последнее правило переопределяет предыдущее. Но на данный момент я не совсем уверен, подходит ли это вообще для Less Mixins. Но я думаю, это так.   -  person Windwalker    schedule 23.06.2017
comment
На эту тему также есть ответ в stackoverflow.com/questions/17100855/overwrite-less-mixin .   -  person Windwalker    schedule 23.06.2017

Ответы (1)


arrow_upward
1
arrow_downward

Вы не можете переопределить их, в качестве альтернативы используйте переменную для определения «фонового цвета». Для переменных Less последний объявленный выигрыш.

Также прочитайте Сопоставление с шаблоном

В Less все подходящие миксины компилируются в исходниках. Вы можете использовать пространство имен для предотвращения конфликтов имен, например:

#ns1 {
.background-color() {
    background: red;
}
}

#ns2 {
.background-color() {
    background: yellow;
}
}

чем вы можете использовать:

body {
    #ns2 > .background-color;
}

Двойные свойства также не удаляются, чтобы сделать возможным взлом браузера, пример:

#myElement {
    width: 300px;
    width: 500px\9;
}

Чтобы найти решение для вашего варианта использования, вы должны переформулировать свой вопрос и объяснить, почему у вас есть миксины с одинаковыми именами.

person Bass Jobsen    schedule 23.11.2014