Share
Los gradientes de CSS tienen una sintaxis bastante desordenada, que empeora una vez que agrega prefijos de proveedores. Entonces, en este tutorial, vamos a hacer que la generación de color de degradado sea más intuitiva con un MENOR Mixin.
Nuestro Mixin atenderá tres tipos de gradientes CSS, a saber: lineal, radial, y repitiendo. Tendremos un par de ajustes para manipular la salida del degradado, incluido el tipo de degradado, la combinación de colores y la orientación del degradado..
Aquí hay una demostración de algo que podremos crear con la mezcla resultante:
Ahora veamos como lo construimos.!
Para empezar, examinaremos la sintaxis que forma los tres tipos de gradiente, y finalmente nos ayudará a impulsar nuestra Mixin.
// 1. imagen de fondo de degradado lineal: degradado lineal (90 grados, # ED4264, #FFEDBC); // 2. imagen de fondo del degradado radial: degradado radial (círculo, # ED4264, #FFEDBC); // 3. repetición (lineal) gradiente repetición-degradado lineal (90deg, # ED4264, #FFEDBC);
Estas son las formas de sintaxis de gradiente CSS, según el estándar W3C. Se requieren prefijos de proveedores para admitir navegadores más antiguos.
Tenga en cuenta que existe una discrepancia con la forma en que los navegadores más antiguos (cuando usan la sintaxis prefijada) representan la orientación de gradiente lineal.
Solía ser el caso de que el 90 grados (que especificamos para formar un gradiente lineal) abarcaría el gradiente de abajo hacia arriba, comenzando desde el # ED4264 a #FFEDBC. 0deg Fue interpretado como de izquierda a derecha. La especificación final, por otro lado, establece que 0deg apunta de abajo hacia arriba, por lo tanto 90 grados abarca el gradiente de derecha a izquierda en lugar.
Los trucos también se producen con los valores de palabras clave utilizados para definir la orientación del degradado. Las especificaciones anteriores utilizaron las palabras clave parte superior, izquierda, Correcto y fondo, mientras que la versión final añade a, por lo tanto hasta arriba, a la izquierda, a derecha, y Hacia abajo.
La siguiente demostración muestra dos gradientes igualmente construidos, cada uno usando los valores 90 grados, # ED4264, #FFEDBC. El de la izquierda usa prefijos y el de la derecha usa la sintaxis moderna.
Los valores de ángulo son más confiables para nuestro caso. Podemos convertir fácilmente el comportamiento del ángulo anterior, a pesar de la discrepancia, para comportarnos de la misma manera que en la especificación final con una simple resta.
x = 90 - y
los y es el ángulo que especificamos para la sintaxis estándar, mientras que X es el valor a utilizar en la sintaxis prefijada.
Justo entonces, vamos a crear el Mixin. Nombraremos nuestro Mixin simplemente .gradiente(), como sigue:
.gradiente (@variables) cuando (@condiciones)
El Mixin pasará una serie de variables para especificar el tipo de degradado, las combinaciones de colores, los prefijos del proveedor para la compatibilidad con versiones anteriores y el índice, así como el condiciones iterar la mezcla.
Estableceremos valores predeterminados para la dirección y los prefijos del proveedor. Por lo tanto, a menos que queramos cambiar la dirección del gradiente, solo tendremos que especificar la tipo y el colores.
Aquí hay un desglose de los valores que necesitamos:
.gradiente (@type; @colors; @dir: 0deg; @prefixes: webkit, moz, ms, o; @index: longitud (@prefixes)) cuando (@index> 0) .gradient (@type; @colors; @dir; @prefixes; (@index - 1)); // el estilo va aquí
Vale la pena señalar que la mayoría de las características de LESS, como Loop, están enraizadas en Mixins. Entonces, aunque técnicamente estamos creando un Loop aquí, todavía podemos llamarlo Mixin. La razón por la que estamos usando un Loop es porque necesitamos generar varias instancias de fondo o imagen de fondo Propiedad para declarar el gradiente, así:
imagen de fondo: -webkit-linear-gradient (90deg, red, blue); imagen de fondo: -moz-linear-gradient (90deg, red, blue); imagen de fondo: -ms-linear-gradient (90deg, red, blue); imagen de fondo: -o-lineal-gradiente (90deg, rojo, azul); imagen de fondo: gradiente lineal (0 grados, rojo, azul);
Esta es la sintaxis completa para generar un gradiente de CSS, proporcionando un respaldo para algunos navegadores anteriores con sintaxis prefijada.
Para generar todas estas reglas, primero deberíamos recuperar cada prefijo definido en el @prefixes variable y convertir el valor de ángulo establecido en el @dir. Luego, formamos la sintaxis de gradiente con el llamado Escape e Interpolación.
.gradiente (@type; @colors; @dir: 0deg; @prefixes: webkit, moz, ms, o; @index: longitud (@prefixes)) cuando (@index> 0) .gradient (@type; @colors; @dir; @prefixes; (@index - 1)); @prefix: extracto (@prefixes, @index); @ dir-old: 90 - (@dir); imagen de fondo: ~ "- @ prefix - @ type -gradient (@ dir-old, @ colors)";
El escape es útil cuando se trata de generar una sintaxis CSS no estándar, o una cadena arbitraria que puede no ser reconocida por LESS. LESS emitirá el código exactamente como lo encuentra, con la única excepción de las variables interpoladas. LESS todavía los reemplazará con sus valores respectivos.
Por último, generaremos la sintaxis estándar, que debe ser de salida. después Todos los valores prefijados. Esto le indica a los navegadores compatibles que lo seleccionen en lugar de la sintaxis prefijada. Para hacerlo, envolvemos la sintaxis estándar dentro de un Mixin Guard, de la siguiente manera:
.gradiente (@type; @colors; @dir: 0deg; @prefixes: webkit, moz, ms, o; @index: longitud (@prefixes)) cuando (@index> 0) .gradient (@type; @colors; @dir; @prefixes; (@index - 1)); @prefix: extracto (@prefixes, @index); @ dir-old: 90 - (@dir); imagen de fondo: ~ "- @ prefix - @ type -gradient (@ dir-old, @ colors)"; & when (@index = length (@prefixes)) background-image: ~ "@ type -gradient (@ dir, @ colors)";
Establecemos una condición que dará salida a la sintaxis cuando el índice de la iteración actual es igual al número de prefijos establecidos en @prefixes. A medida que la iteración del bucle comienza desde el mayor número y luego baja a 0, la sintaxis estándar se generará junto con la primera sintaxis prefijada, que en este caso es -o-.
Nuestro gradiente Mixin está listo, podemos usarlo ahora!
Como se mencionó, sólo estamos necesario para especificar el tipo de degradado y los colores, por ejemplo:
.gradiente (lineal; # 2BC0E4, # EAECC6);
Observe que cada parámetro debe estar separado con una ;. Usamos una coma para listar colores y prefijos de proveedores.
Si desea personalizar la parada de color, puede escribir:
.gradiente (lineal; # 2BC0E4, # EAECC6 30%);
El cambio de la dirección del gradiente se debe hacer con un valor de ángulo en lugar de su contraparte de palabras clave:
.gradiente (lineal; # 2BC0E4, # EAECC6 30%; 180deg);
El siguiente es un ejemplo en el que creamos un degradado radial:
.gradiente (círculo; # 2BC0E4, # EAECC6);
¿Generando un gradiente de repetición? No hay problema:
.gradiente (repetición-lineal; # 085078, # 2BC0E4 25px, # EAECC6 50px);
En este caso, asegúrese de ajustar la tamaño de fondo en consecuencia para ver el resultado deseado.
En este tutorial, hemos creado un Mixin para hacer que la generación de gradientes CSS sea más consciente. También hemos aprendido sobre escapando y interpolación en el camino.
Además, nuestro gradiente Mixin es un buen ejemplo del uso de Loop. En lugar de enumerar toda la sintaxis prefijada de esta manera:
.radial (dirección @: 50% 50%, @origin: #fff, @end: # 000) background-color: # e9b90f; imagen de fondo: -webkit-gradient (radial, @ direction, 0, @ direction, 200, from (@end), to (@origin)); imagen de fondo: -webkit-radial-gradient (@direction, @origin, @end); imagen de fondo: -moz-radial-gradient (@direction, @origin, @end); imagen de fondo: -o-radial-gradient (@direction, @origin, @end); imagen de fondo: -ms-radial-gradient (@direction, @origin, @end); imagen de fondo: gradiente radial (@direction, @origin, @end);
... recorremos una lista de prefijos de una variable, generando cada uno de ellos a medida que avanzamos. Podemos combinar varios colores en combinación, así como especificar las paradas sin restricción. Este Mixin es realmente bastante flexible..
La única pieza que falta es la sintaxis propietaria de Internet Explorer DXImageTransform.Microsoft.gradient, aunque me gustaría animar a todos a mirar hacia el futuro y Microsoft Edge en su lugar!
Accentsconagua