css3 - ¿Hay alguna manera de usar variables en Less para el operador ~, como ~ "calc(100%-@spacing)";

css-calc

Question

¿Hay alguna manera de usar variables en less ~ operator, como

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

Cuando lo he probado, solo funciona con valores estáticos como

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

¿Puedo hacer que la cuerda sea evaluada antes de establecerse como una propiedad?

Answer 1

Para deshabilitar el cálculo que LESS realiza automáticamente al descubrir un valor entre dos valores numéricos pero que todavía puede usar variables, puede escribir uno de los siguientes:

1) Solo escapa del operador que desencadena el cálculo y usa la variable como lo haces normalmente

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

2) Escape de la expresión completa e interpole la variable con la notación @{padding}

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

Prefiero la segunda versión, ya que se asemeja a los literales de plantilla de JavaScript y se ve un poco más limpio, pero de cualquier manera funciona bien.

Ambas soluciones desactivan el cálculo automático Less y compilan para el resultado correcto:

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