Я указываю размеры шрифта в 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) без пробелов