Как переопределить mixins в LESS CSS 1.4+

Question

Я использовал то, что я считал очень элегантным шаблоном для определения стилей повторно используемых компонентов/виджетов, используя LESS. Он отлично работает в LESS 1.3-, но после обновления в последнее время вся моя библиотека сломана. Кто-нибудь знает способ сделать что-то подобное в версии 1.4+?

Вот очень простой пример компонента:

#componentName { 
    .loadMixins(){ 
    .text() {} 
    .header() {} 
    } 

    .apply(){ 
    > h3 { 
     // markup-specific styles 
     padding: 3px; 
     margin-bottom: 0; 

     // custom styles 
     .header(); 
    } 

    > div.body, > div.popup p { 
     color: red; 

     // custom styles 
     .text() 
    } 
    } 
} 

А вот как он будет использоваться:

.coolWidget { 
    #componentName.loadMixins(); 

    // override mixins here 
    .text(){ 
    color: green; 
    } 

    #componentName.apply(); 
} 

Это сохраняет все разметки в зависимости от стилей абстрагируется от пользователя. Я мог бы полностью изменить свою разметку, и стили пользователя все равно будут работать. Согласно less.js changelog, 1.4.0 Beta 1 имеет строку «переменные в mixins больше не« течет »в их область видимости».

Есть ли какой-либо путь вокруг этого?

Answer 1

Строго говоря, вложенные переменные и миксины по-прежнему расширены в область вызова, если только в этой области уже определены эти имена.

Ваш пример выше, приводит к ошибке:

SyntaxError: .header is undefined... 

и ожидается, как не .header() фактически не определяется в .coolWidget (или где-либо еще). Это можно устранить, предоставив определения по умолчанию для .text и .header где-то внутри #componentName. Например, если изменить .loadMixins() для:

.loadMixins() { 
    .text(); 
    .header(); 

    // default properties in case a caller does not provide its own: 
    .text() {} 
    .header() {} 
} 

то пример компилирует ОК, и все свойства текста/заголовка отменяются, как и ожидалось.

---

Я могу себе представить, как ваша библиотека может порваться из-за новых правил области видимости, но этот конкретный пример, который вы дали выше, не иллюстрирует эту проблему.