МЕНЬШЕ интерполяции строк

Я указываю размеры шрифта в Ems, что означает, что они относятся к родительскому контейнеру. У меня есть несколько дочерних элементов, и я не хочу повторять родительский размер каждый раз, когда делаю для него вычисления. Итак, у меня есть:

@articleFontSize: 21/16;

Если в дальнейшем я использую:

font-size: @articleFontSizeem;

, как и следовало ожидать, я получаю «переменная @articleFontSizeem не определена».

Если я интерполирую его:

font-size: @{articleFontSize}em;

, он снова откажется компилироваться, и я просто получу простую «синтаксическую ошибку».

font-size: @articleFontSize~"em";

Это компилируется, но на выходе я получаю такой код:

font-size: 1.3125 em;

т.е. перед единицами добавлен пробел, поэтому браузер игнорирует их.

Я запускаю LiveReload на Mac (2.0 beta 5), ​​который, согласно настройкам, использует для компиляции "System Ruby 1.8.7".

ОБНОВЛЕННЫЕ РЕШЕНИЯ:

a. Добавьте нулевое количество правильных единиц:

font-size: 0em + @articleFontSize;

b. (мой предыдущий альтернативный метод - использование функции):

.rFont(@target, @context) {
    @ratio: @target/@context;
    font-size: ~"@{ratio}em";
}

Вызывается с помощью:

.rFont(11,@articleFontSize);

Вывод (правильно, не обращайте внимания на нежелательные пробелы):

font-size: 0.7063571428571428em;

Я не ожидал, что вставка @ {ratio} внутри тильды + кавычки по-прежнему расширяется Это. Но он работает (почти ничто другое не работает.)

Помог этот вопрос: объединение значений в less (css) без пробелов

8
задан Community 23 May 2017 в 12:14
поделиться