¿Cómo puedo multiplicar un valor de ancho de píxel con MENOS Css?

Question

Estoy tratando de configurar el relleno en algunos \ elementos con el estilo de píldoras, y quiero cambiar dinámicamente el relleno. Sé que puedo hacer:

@pill-padding-v: 8px; 
@pill-padding-h: 15px; 

padding:@pill-padding-v @pill-padding-h; 

que hace esto - y parece funcionar bien:

padding:8px 15px; 

Pero ¿cómo puedo tener menos añadir 1px de relleno para que?

@pill-padding-v: 8; 
@pill-padding-h: 15; 

@pill-padding-v: (@pill-padding-v + 1) 
@pill-padding-h: (@pill-padding-h + 1) 

padding:@pill-padding-vpx @pill-padding-hpx; 

El probelem principal parece estar agregando "px" como parte del nombre de la variable Obtengo un error de compilación. También creo que es sintácticamente incorrecto usar 8 px en lugar de 8px y que también parece romperse en los navegadores.

¿Cómo puedo tener multiplicar un valor de ancho de píxel con MENOS Css?

Answer 1

Tiene razón al agregar el px a la variable está causando problemas. De hecho, probé la sintaxis de interpolación y no ayudó, pero debería especificar las unidades de todos modos en sus variables (px, em, % ...), como en su primer ejemplo de trabajo.

Has dicho "multiplicar" pero creo que querías decir "agregar". No debería haber ningún problema, intente lo siguiente:

@pill-padding-v: 8px; 
@pill-padding-h: 15px; 

@pill-padding-v: (@pill-padding-v + 1); 
@pill-padding-h: (@pill-padding-h + 1); 

element { 
    padding:@pill-padding-v @pill-padding-h; 
} 

de salida debe ser:

element { padding:9px 16px; } 

... aunque, es posible que desee utilizar sólo otro nombre de variable o añadir la derecha en el 1px declaración de estilo. No creo que volver a declarar las variables sea una buena práctica, y en realidad me sorprendió que funcionase.

Answer 2

Aparte de complemento, se puede realizar cualquier cálculo matemático utilizando menos de esta manera:

@pill-padding-v: 8; 
@pill-padding-h: 15; 

element { 
/* the numbers I'm multiplying by are arbitrary, 
but the value defined in the LESS variable will append 
the unit that you multiply it by. */ 
padding: calc(@pill-padding-v * 3px) calc(@pill-padding-h * 2px); 
} 

MENOS salidas:

element { 
    padding:calc(24px) calc(30px); 
} 

A pesar de que está envuelto en la función Calc, está bien, porque el resultado de la "ecuación" sin operador matemático, es ese valor de todos modos.

El usuario seven-phases-max ofrece un buen punto: no necesita la función calc() en el LESS. Se puede escribir en LESS como:

element { 
    padding: (@pill-padding-v * 3px) (@pill-padding-h * 2px); 
}