Есть ли способ использовать переменные в Less для оператора ~, например ~ "calc (100% - @spacing)";

Есть ли способ использовать переменные в менее ~, например

~"calc(70% - @spacing)";

Когда я попробовал, он работает только со статическими значениями, например

 ~"calc(70% - 10px)";

Могу ли я получить строку для оценки до того, как она будет установлена ​​как свойство.

Ответы

Ответ 1

Чтобы отключить вычисление, которое LESS выполняет автоматически при обнаружении - между двумя числовыми значениями, но все еще имеющее возможность использовать переменные, вы можете написать одно из следующего:

1) Выйдите из оператора, который запускает вычисление, и используйте переменную, как обычно,

@padding: 20px;
body {
    padding: calc(100% ~"-" @padding);
}

2) Побег всего выражения и интерполяция переменной с помощью обозначения @{padding}

@padding: 20px;
body {
    padding: ~"calc(100% - @{padding})";
}

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

Оба решения отключают автоматическое вычисление меньшего размера и компилируются с правильным результатом:

body {
  padding: calc(100% - 20px);
}