Почему не будет компилироваться этот LESS css?

Question

Я пытаюсь создать mixin, который примет два параметра и размер вывода в px и rem. Это код:

.sizing (@cssProperty; @sizeValue) { 
    @cssProperty: ((@sizeValue * @basefont) * 1px); 
    @cssProperty: (@sizeValue * 1rem); 
} 

Usage будет, как:

h2 { 
    .sizing(font-size; 1) 
} 

Который должен вывести (в зависимости от того, какого размера BASEFONT определен):

h2 { 
    font-size: 12px; 
    font-size: 1rem; 
} 

Но simpLESS не компилируется это, и говорит, что в этих двух строках имеется ошибка:

.sizing (@cssProperty; @sizeValue) { 
.sizing(font-size; 1); 

Что я делаю неправильно? Это из-за имен переменных переменных?

Answer 1

МЕНЬШЕ не позволяет использовать переменную в качестве имени CSS свойства.

В вашем коде выше @cssProperty: ((@sizeValue * @basefont) * 1px); есть определение новой переменной @cssProperty, а не инструкция CSS property: value, поэтому она не выводит вывод CSS.

Там обходной путь для того, что вы хотите достичь, хотя, см 14868042, 18558368 и т.д ...

Answer 2

Только что заметил, что вы пытаетесь использовать переменные как имена свойств вместо значений, которые не поддерживаются меньшим количеством.

Существует хак выделен в этом ответе, как обходной путь:

How to pass a property name as an argument to a mixin in less

.mixin(@prop, @value) { 
    Ignore: ~"a;@{prop}:@{value}"; 
}