Передача переменной LESS в JavaScript

У меня есть LESS-файл с некоторыми переменными:

@font-size: 100%;
@label-align: left;
@field-width: 230px;
@icon-size: 16px;
@icon-padding: 8px;

В моем JS-скрипте мне нужно знать сумму некоторых начальных значений, которые пользователь установил в МЕНЬШЕ файл. Вычисленные значения css могут меняться в зависимости от размера родительского контейнера. Эти значения также изменяются при первой загрузке в зависимости от размера окна.

Некоторые элементы также создаются динамически, поэтому получить правильные начальные значения в JS очень сложно, потому что мне пришлось бы объявлять переменные в разных точках кода и в разных областях.

У меня была идея объявить объект «высокой области видимости» с некоторыми фиктивными переменными и присвоить значение переменной, как только я добавлю элемент к DOM, но это оказалось беспорядочным и избыточным.

После многих часов мне пришла в голову идея, которая в настоящее время работает, немного хакерская, но работает.

LESS:

.less-vars {
    width: @field-width + @error-width + @icon-size + (@icon-padding * 2);
}

JS:

var less_vars = $('<div class="less-vars" />').hide().appendTo('body').width();
$('.less-vars').remove();

Есть ли другой способ сделать это?