MENOS guardias de CSS sin mixin

Question

Me estoy metiendo en LESS y estoy tratando de descubrir cómo puedo hacer declaraciones de CSS condicional sin mixins. Encuentro que tengo muchas declaraciones de CSS de una sola línea que solo ocurren una vez pero que dependen de alguna variable o condición y que el uso de mixins es un poco inútil ya que nunca será reutilizado.

Ejemplo.

@add-margin: true; 

body { 
    margin-top: 20px; //I only want this if add-margin is true 
} 

De manera ideal, quiero esto:

body when (@add-margin) { 
    margin-top: 20px; 
} 

Pero eso no funciona. Usar un mixin funciona, pero parece una tontería hacer uno solo por un trazador de líneas. ¿Hay alguna forma alternativa de que pueda hacer esto?

Gracias

Answer 1

no, no es posible en esa forma.

puede usar una variable igual a 0 o 1 y multiplicar por 20 y luego siempre generar una regla, o usar JavaScript (le aconsejo que evite esto) para convertir verdadero a 0 o 20 y siempre generar una regla, pero si quiere que la propiedad se agregue condicionalmente, necesita guardias.

Answer 2

sí puede, es similar a su código.

@add-margin: true; 

.margin() when (@add-margin) { 
    margin-top: 20px; 
} 

body { .margin(); } 

ACTUALIZACIÓN: Utilizando las últimas versiones inferiores (1.5 +), el uso de "mixins vigilados" no están obligados a ello, y se podía utilizar "gaurds CSS" en lugar, por lo tanto, el código de la OP trabajar fuera de la caja

Answer 3

La característica CSS Guards se introdujo en Less v1.5.0 y, por lo tanto, ahora podemos usar guardias de la misma forma que se menciona en la pregunta.

@add-margin: true; 

body when (@add-margin){ 
    margin-top: 20px; 
} 

Si en el caso, es necesario asignar múltiples tales propiedades a diferentes selectores basados ​​en la misma variable, que puede implementarse como a continuación mediante el selector &.

& when (@add-margin){ 
    body{ 
     margin-top: 20px; 
    } 
    h1{ 
     margin-top: 10px; 
    } 
} 

Nota: Como se ha mencionado por memeLab en los comentarios, cualquier valor de la variable de @add-margin que no sea true son considered as falsy. Esto se debe a que true es una palabra clave, mientras que 'true' es un valor de cadena. Por ejemplo, a continuación no se generará nada.

@add-margin: 'true'; 

body when (@add-margin){ 
    margin-top: 20px; 
} 

Sin embargo, lo siguiente funcionaría porque hace una comparación de cadenas.

@add-margin: 'true'; 

body when (@add-margin = 'true'){ 
    margin-top: 20px; 
} 

Si está utilizando Menos compilador inferior a v1.5.0, entonces la respuesta Publicado por Unicornist es la mejor apuesta.