mac - less vs sass

Múltiples propiedades son tratadas como argumentos separados en mixins

Question

Estoy tratando de escribir una mezcla, pero parece que no consigo que los argumentos funcionen como quiero: cada una de las propiedades se trata como un argumento separado.

Código actual

.transition(@property: all, @time: 1s, @timing: ease-in-out) {
-moz-transition: @property @time @timing;
-webkit-transition: @property @time @timing;
-o-transition: @property @time @timing;
transition: @property @time @timing;
}
a {
.transition(color, opacity, .5s);
}

Salida deseada

a {
-moz-transition: color, opacity .5s ease-in-out;
-webkit-transition: color, opacity .5s ease-in-out;
-o-transition: color, opacity .5s ease-in-out;
transition: color, opacity .5s ease-in-out;
}

Salida real

a {
-moz-transition: color opacity .5s;
-webkit-transition: color opacity .5s;
-o-transition: color opacity .5s;
transition: color opacity .5s;
}

¿Algunas ideas?

Answer 1

El uso de la solución encontrada here funciona con uno y múltiples argumentos:

.transition (@value1,@value2:X,...)
{
@value: ~`"@{arguments}".replace(/[/[/]]|/,/sX/g, '''')`;
-webkit-transition: @value;
-moz-transition: @value;
-ms-transition: @value;
-o-transition: @value;
transition: @value;
}

Usándolo de esta manera:

.transition(color, opacity .5s ease-in-out);

rendimientos

-webkit-transition: color, opacity .5s ease-in-out;
-moz-transition: color, opacity .5s ease-in-out;
-ms-transition: color, opacity .5s ease-in-out;
-o-transition: color, opacity .5s ease-in-outt;
transition: color, opacity .5s ease-in-out;

Answer 2

Menos mixins tienen la capacidad de usar argumentos separados por punto y coma (así como separados por comas). Te recomiendan que siempre uses punto y coma .

Si un punto y coma está presente en una lista de argumentos cuando se llama el mixin, todo lo que se encuentre entre ellos será considerado como argumentos, incluso si esas cosas tienen comas. Esto le permite pasar una lista separada por comas como UN argumento. Si un punto y coma NO está presente, tratará las comas como separadores de argumentos.

.transition(@property: all; @time: 1s; @timing: ease-in-out) { // NOTE THE SEMICOLONS
transition: @property @time @timing;
}
a {
.transition(color,opacity; .5s); // SEMICOLON AFTER ''opacity''
}
b {
.transition(color,opacity, .5s); // COMMA INSTEAD
}

salida:

a {
transition: color,opacity .5s ease-in-out;
}
b {
transition: color opacity .5s; // invalid syntax
}

Tenga en cuenta que la syntax de la propiedad de transition abreviada debe ser una lista de transiciones simples separadas por comas. Entonces b tiene un valor no válido y a tiene dos transiciones, en las que los valores no especificados se predeterminan a su valor inicial:

1. color 0s ease 0s
2. opacity .5s ease-in-out 0s

Esto probablemente no es lo que pretendías. (Parece que querías el color .5s ease-in-out 0s y la opacity .5s ease-in-out 0s color .5s ease-in-out 0s opacity .5s ease-in-out 0s ).

Ahora puede que se esté preguntando, "¿cómo paso una lista separada por comas como un solo argumento, cuando no hay otros argumentos?" Simplemente agregue un punto y coma al final de la lista.

.transition(@property: all; @time: 1s; @timing: ease-in-out) {
transition: @property @time @timing;
}
b {
.transition(color,opacity;); // DUMMY SEMICOLON AFTER ARGUMENT
}
i {
.transition(color,opacity); // MISSING SEMICOLON
}

salida:

b {
transition: color,opacity 1s ease-in-out; // ''color,opacity'' is the first argument
}
i {
transition: color opacity ease-in-out; // ''color'' is 1st arg, ''opacity'' is 2nd arg
}

De nuevo, la sintaxis de i no es válida b tiene dos transiciones:

1. color 0s ease 0s
2. opacity 1s ease-in-out 0s

Answer 3

Si desea pasar una lista separada por comas como un argumento para mezclar, simplemente puede usar un punto y coma para separar los argumentos .

El código siguiente funciona como se desea con la mezcla que definió:

a {
.transition(color, opacity; .5s);
}

Answer 4

Yo sugeriría usar la función de escape de LESS, es decir:

a:link, a:visited {
color: green;
opacity: .5;
font-size: 1em;
}
a:hover {
color: red;
opacity: 1;
font-size: 2em;
.transition(e("font-size, color"));
}

Y aunque parece que MENOS acepta eso, solo animará la última propiedad en la cadena separada por comas que envíes. Una pena.