Меньше Mixin, используя переменную в селекторе атрибутов

Question

РЕДАКТИРОВАТЬ: Проблема может быть с ошибкой в ​​бесцеремонном, что мы и используем.

Я пытаюсь написать метод Less Mixin для написания множества стилей CSS. Общий формат метода:

.icon-styles(@name) { 

    .@{name}-icon { 
     background-image: url('../images/icon-@{name}.png'); 
     display: none; 
    } 

    [data-@{name}="true"] .@{name}-icon { 
     display: inline-block; 
    } 
} 

Такое, что является видимым только, если содержащий объект имеет соответствующий набор атрибутов.

Однако я получаю сообщение об ошибке на селектор атрибута, говоря:

Expected ']' but found '{' 

Указав на @ в квадратных скобках.

Я нашел этот пост:

LESS mix variable into attribute name in an attribute selector expression

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

Я также пытался писать так:

[~'data-@{name}'="true"] .@{name}-icon { 

Что избавляется от ошибки, но затем @ {имя} не будет решена в результате CSS.

Кто-нибудь знает, есть ли способ достичь того, чего я хочу?

Answer 1

Трюк такой же, как предлагается в LESS mix variable into attribute name in an attribute selector expression. Вы просто отсутствует главный пункт этого: «конкатенация интерполяцией переменных не поддерживается внутри [attr] блоков», так что вам нужно, чтобы выйти из него:

.icon-styles(@name) { 

    .@{name}-icon { 
     background-image: url('../images/icon-@{name}.png'); 
     display: none; 
    } 

    @data-name: ~'data-@{name}'; 
    [@{data-name}="true"] .@{name}-icon { 
     display: inline-block; 
    } 
}