css - edteam - ¿Puedo definir una mezcla MENOS para generar una propiedad de transición con un número variable de parámetros?

variables css javascript

Question

Estoy presentando a LESS a un gran proyecto de aplicación web para simplificar mi CSS. Tengo algunas reglas CSS que aplican transiciones a un número variable de propiedades, por ejemplo:

.movable {
transition-property: top, left;
transition-duration: 0.2s;
transition-timing-function: ease;
}
.fadeAndStretchable {
transition-property: opacity, width, height, margin;
transition-duration: 1.5s;
transition-timing-function: ease-out;
}

(Nota: he omitido las -moz -webkit , -webkit y -o aquí por brevedad: en realidad, cada una de estas reglas tiene una longitud de 12 líneas en lugar de 3.)

Tenga en cuenta que los valores de transition-property de transition-property están separados por comas. Esto es inusual en CSS: los valores múltiples suelen estar separados por espacios (como en el border: 1px solid #f00 ). LESS mixins puede usar el valor especial de @arguments para producir una lista separada por espacios de todos los argumentos de la mezcla , pero es posible definir una LESS mixin que toma un número variable de parámetros y los convierte en una lista de valores separados por comas, adecuada para transition-property de transition-property ?

Si es necesario, estoy contento con una solución que requiere dos combinaciones: una para transition-property de transition-duration y otra para transition-duration transition-timing-function . Esto es lo que he intentado hasta ahora:

Intento 1: usar @arguments con parámetros sin nombre

.transition-property() {
-webkit-transition-property: @arguments;
-moz-transition-property: @arguments;
-o-transition-property: @arguments;
transition-property: @arguments;
}
.movable {
.transition-property(top, left);
}

Resultado: LESS error ("No se encontró una definición coincidente para ''.transition-property (arriba, izquierda)''")

Intento 2: usar @arguments con parámetros nombrados

.transition-property(@p1, @p2, @p3, @p4, @p5) {
-webkit-transition-property: @arguments;
-moz-transition-property: @arguments;
-o-transition-property: @arguments;
transition-property: @arguments;
}
.movable {
.transition-property(top, left);
}

Resultado: LESS error ("No se encontró una definición coincidente para ''.transition-property (arriba, izquierda)''")

Intento 3: usando parámetros nombrados con valores predeterminados ficticios

.transition-property(@p1:p1, @p2:p2, @p3:p3, @p4:p4, @p5:p5) {
-webkit-transition-property: @p1, @p2, @p3, @p4, @p5;
-moz-transition-property: @p1, @p2, @p3, @p4, @p5;
-o-transition-property: @p1, @p2, @p3, @p4, @p5;
transition-property: @p1, @p2, @p3, @p4, @p5;
}
.movable {
.transition-property(top, left);
}

Resultado: No hay MENOS errores, pero genera una regla CSS -webkit-transition-property: top, left, p3, p4, p5 que el navegador ignora debido a las propiedades no reconocidas.

He intentado varios otros enfoques (p. Ej., Pasar la propiedad como una cadena ''top,left'' ) pero todos resultan en lo mismo: un error MENOS o un CSS no válido.

¿Hay alguna manera de evitar esto? O tengo que morder la bala y definir un conjunto de mixins sobrecargados en arity, por ejemplo

.transition-property(@p1) {...}
.transition-property(@p1, @p2) {...}
.transition-property(@p1, @p2, @p3) {...}
.transition-property(@p1, @p2, @p3, @p4) {...}
etc.

Answer 1

Flexible (MENOS 1.5.1+)

Esta solución no utiliza ningún javascript en línea y permite:

1. Los valores predeterminados se establecen
2. Cualquier número de propiedades, duraciones, retrasos, etc., para ser pasado
3. Salida en forma larga o compacta
4. Una entrada de lista sin procesar en lugar de grupos de parámetros que se ingresan si se desea

Si el número de propiedades es mayor que el número de duraciones, retrasos o tiempos, entonces, si se establece la salida compact , el valor final de duración / retraso / tiempo se convierte en el valor para ese parámetro para todas las propiedades adicionales más allá del número pasado. pero si no se establece compact , entonces la forma larga se imprime y los valores se duplican según los navegadores interpretan los estándares de css .

MENOS Mixin

.transition (@props: all;
@duration:1s;
@delay: 0s;
@timing: ease;
@compact: true;
@raw-input: false) {
.output() when (@raw-input = false) and not (@compact = true) {
-webkit-transition-property:@props;
-moz-transition-property:@props;
-ms-transition-property:@props;
-o-transition-property:@props;
transition-property:@props;
-webkit-transition-duration:@duration;
-moz-transition-duration:@duration;
-ms-transition-duration:@duration;
-o-transition-duration:@duration;
transition-duration:@duration;
-webkit-transition-delay: @delay;
-moz-transition-delay: @delay;
-ms-transition-delay: @delay;
-o-transition-delay: @delay;
transition-delay: @delay;
-webkit-transition-timing-function:@timing;
-moz-transition-timing-function:@timing;
-ms-transition-timing-function:@timing;
-o-transition-timing-function:@timing;
transition-timing-function:@timing;
}
.output() when (@raw-input = false) and (@compact = true) {
@propsLength: length(@props);
@durationLength: length(@duration);
@delayLength: length(@delay);
@timingLength: length(@timing);
.buildString(@i, @s: ~'''') when (@i <= @propsLength) {
@prop: extract(@props, @i);
.setDuration() when (@i <= @durationLength) {
@dur: extract(@duration, @i);
}
.setDuration() when (@i > @durationLength) {
@dur: extract(@duration, @durationLength);
}
.setDuration();
.setDelay() when (@i <= @delayLength) {
@del: extract(@delay, @i);
}
.setDelay() when (@i > @delayLength) {
@del: extract(@delay, @delayLength);
}
.setDelay();
.setTiming() when (@i <= @timingLength) {
@time: extract(@timing, @i);
}
.setTiming() when (@i > @timingLength) {
@time: extract(@timing, @timingLength);
}
.setTiming();
.setDivider() when (@i > 1) {
@divider: ~''@{s},'';
}
.setDivider() when (@i = 1) {
@divider: ~'''';
}
.setDivider();
@string: @divider @prop @dur @del @time;
.buildString((@i + 1), @string);
}
.buildString(1);
.buildString(@i, @s: ~'''') when (@i > @propsLength) {
.compact(@s);
}
}
.output() when not (@raw-input = false) {
.compact(@raw-input);
}
.compact(@string) {
-webkit-transition:@string;
-moz-transition:@string;
-ms-transition:@string;
-o-transition:@string;
transition:@string;
}
.output();
} 

MENOS Ejemplos de uso

.test {
.transition();
}
.test-props {
.transition(width);
}
.test-duration {
.transition(@duration: 3s);
}
.test-delay {
.transition(@delay: 10s);
}
.test-timing {
.transition(@timing: linear);
}
.test-all {
.transition(height, 4s, 12s, ease-out);
}
.test-multitransitions {
.transition(width, height, top; 1s, 2s; 0s, 1s, 3s; ease-in, ease-out, ease);
}
.test-not-compact {
.transition(width, height, top; 1s, 2s; 0s, 1s, 3s; ease-in, ease-out, ease; false);
}
.test-raw-input {
.transition(@raw-input: top 1s, bottom 1s, color 3s 1s linear;);
}

En los ejemplos anteriores, tenga en cuenta dos cosas en particular: (1) cómo deben pasarse los múltiples valores utilizando comas para separar las listas, pero puntos y coma para separar los grupos de parámetros. Así que para visualizar, es esto:

 .transition(width, height, top; 1s, 2s; 0s, 1s, 3s; ease-in, ease-out, ease);
|---Properties----|-Dur.--|---Delay---|---------Timing--------|
| | |
semicolons divide groups of parameters

(2) cómo el ejemplo de raw-input necesita un punto y coma final para que considere las comas como elementos de lista:

 .transition(@raw-input: top 1s, bottom 1s, color 3s 1s linear;);
|
semicolon here needed

CSS de salida de ejemplos

.test {
-webkit-transition: all 1s 0s ease;
-moz-transition: all 1s 0s ease;
-ms-transition: all 1s 0s ease;
-o-transition: all 1s 0s ease;
transition: all 1s 0s ease;
}
.test-props {
-webkit-transition: width 1s 0s ease;
-moz-transition: width 1s 0s ease;
-ms-transition: width 1s 0s ease;
-o-transition: width 1s 0s ease;
transition: width 1s 0s ease;
}
.test-duration {
-webkit-transition: all 3s 0s ease;
-moz-transition: all 3s 0s ease;
-ms-transition: all 3s 0s ease;
-o-transition: all 3s 0s ease;
transition: all 3s 0s ease;
}
.test-delay {
-webkit-transition: all 1s 10s ease;
-moz-transition: all 1s 10s ease;
-ms-transition: all 1s 10s ease;
-o-transition: all 1s 10s ease;
transition: all 1s 10s ease;
}
.test-timing {
-webkit-transition: all 1s 0s linear;
-moz-transition: all 1s 0s linear;
-ms-transition: all 1s 0s linear;
-o-transition: all 1s 0s linear;
transition: all 1s 0s linear;
}
.test-all {
-webkit-transition: height 4s 12s ease-out;
-moz-transition: height 4s 12s ease-out;
-ms-transition: height 4s 12s ease-out;
-o-transition: height 4s 12s ease-out;
transition: height 4s 12s ease-out;
}
.test-multitransitions {
-webkit-transition: width 1s 0s ease-in, height 2s 1s ease-out, top 2s 3s ease;
-moz-transition: width 1s 0s ease-in, height 2s 1s ease-out, top 2s 3s ease;
-ms-transition: width 1s 0s ease-in, height 2s 1s ease-out, top 2s 3s ease;
-o-transition: width 1s 0s ease-in, height 2s 1s ease-out, top 2s 3s ease;
transition: width 1s 0s ease-in, height 2s 1s ease-out, top 2s 3s ease;
}
.test-not-compact {
-webkit-transition-property: width, height, top;
-moz-transition-property: width, height, top;
-ms-transition-property: width, height, top;
-o-transition-property: width, height, top;
transition-property: width, height, top;
-webkit-transition-duration: 1s, 2s;
-moz-transition-duration: 1s, 2s;
-ms-transition-duration: 1s, 2s;
-o-transition-duration: 1s, 2s;
transition-duration: 1s, 2s;
-webkit-transition-delay: 0s, 1s, 3s;
-moz-transition-delay: 0s, 1s, 3s;
-ms-transition-delay: 0s, 1s, 3s;
-o-transition-delay: 0s, 1s, 3s;
transition-delay: 0s, 1s, 3s;
-webkit-transition-timing-function: ease-in, ease-out, ease;
-moz-transition-timing-function: ease-in, ease-out, ease;
-ms-transition-timing-function: ease-in, ease-out, ease;
-o-transition-timing-function: ease-in, ease-out, ease;
transition-timing-function: ease-in, ease-out, ease;
}
.test-raw-input {
-webkit-transition: top 1s, bottom 1s, color 3s 1s linear;
-moz-transition: top 1s, bottom 1s, color 3s 1s linear;
-ms-transition: top 1s, bottom 1s, color 3s 1s linear;
-o-transition: top 1s, bottom 1s, color 3s 1s linear;
transition: top 1s, bottom 1s, color 3s 1s linear;
}

Si nunca se desea una forma larga, entonces el código de mezcla se puede reducir a esto:

.transition (@props: all;
@duration:1s;
@delay: 0s;
@timing: ease;
@raw-input: false) {
.output() when (@raw-input = false) {
@propsLength: length(@props);
@durationLength: length(@duration);
@delayLength: length(@delay);
@timingLength: length(@timing);
.buildString(@i, @s: ~'''') when (@i <= @propsLength) {
@prop: extract(@props, @i);
.setDuration() when (@i <= @durationLength) {
@dur: extract(@duration, @i);
}
.setDuration() when (@i > @durationLength) {
@dur: extract(@duration, @durationLength);
}
.setDuration();
.setDelay() when (@i <= @delayLength) {
@del: extract(@delay, @i);
}
.setDelay() when (@i > @delayLength) {
@del: extract(@delay, @delayLength);
}
.setDelay();
.setTiming() when (@i <= @timingLength) {
@time: extract(@timing, @i);
}
.setTiming() when (@i > @timingLength) {
@time: extract(@timing, @timingLength);
}
.setTiming();
.setDivider() when (@i > 1) {
@divider: ~''@{s},'';
}
.setDivider() when (@i = 1) {
@divider: ~'''';
}
.setDivider();
@string: @divider @prop @dur @del @time;
.buildString((@i + 1), @string);
}
.buildString(1);
.buildString(@i, @s: ~'''') when (@i > @propsLength) {
.compact(@s);
}
}
.output() when not (@raw-input = false) {
.compact(@raw-input);
}
.compact(@string) {
-webkit-transition:@string;
-moz-transition:@string;
-ms-transition:@string;
-o-transition:@string;
transition:@string;
}
.output();
}

Answer 2

Desde less.js 1.3 en adelante, debe especificar ... en la lista de argumentos para indicar que se pueden agregar más argumentos. p.ej

.transition-property(...) {
foo: @arguments;
}

Answer 3

Me las arreglé para averiguarlo gracias a que Luke Page me señaló la ... sintaxis.

La solución fue usar lo siguiente:

• ... para permitir parámetros variables
• Backticks para la evaluación de JavaScript
• Interpolación de cadena variable
• Un prefijo ~ para escape la expresión resultante (es decir, evitar que MENOS la encierren en una cadena)
• Buenas viejas expresiones regulares

Uf. Aquí está la mezcla resultante:

.transition-properties(...) {
-webkit-transition-property: ~`"@{arguments}".replace(/[/[/]]/g, '''')`;
}

Y aquí está la versión completa con un conjunto completo de extensiones de navegador:

.transition-properties(...) {
@props: ~`"@{arguments}".replace(/[/[/]]/g, '''')`;
-webkit-transition-property: @props;
-moz-transition-property: @props;
-o-transition-property: @props;
transition-property: @props;
}

Answer 4

Quizás estoy malinterpretando tus necesidades. ¿Por qué no puedes usar una cadena de escape?

Al igual que:

.transition ( @property, @duration, @style: ease-in-out ) {
-webkit-transition-property: @property;
-webkit-transition-duration: @duration;
-webkit-transition-timing-function: @style;
-moz-transition-property: @property;
-moz-transition-duration: @duration;
-moz-transition-timing-function: @style;
-ms-transition-property: @property;
-ms-transition-duration: @duration;
-ms-transition-timing-function: @style;
-o-transition-property: @property;
-o-transition-duration: @duration;
-o-transition-timing-function: @style;
transition-property: @property;
transition-duration: @duration;
transition-timing-function: @style;
}
#my-id {
.transition( ~"background, border-color, color", 2s );
}

Esto es exactamente lo que usamos para las transiciones de múltiples propiedades. Nunca tuve un problema con eso.