Share
En este tutorial, cubriremos ampliamente el MENOS lazo (junto con algunas otras características LESS que hemos analizado en publicaciones anteriores, como las guardas de Mixins y las funciones de color). Looping es una característica realmente útil en LESS y nos permite automatizar muchas tareas de estilo repetitivo.
"Loop" es un método de programación que repite (o itera) una función. Normalmente, se utiliza para procesar una lista de datos. Si tiene experiencia con cualquier otro lenguaje de programación, seguramente habrá encontrado un bucle antes.
En MENOS, la sintaxis básica se vería un poco así:
.bucle (@parameters) cuando (@condition) .loop (@parameters + 1); // iterar. // haz la cosa aquí.
Definimos un ciclo de MENOS de una manera similar a como definimos los Guardias de Mixin, pero esta vez anidamos una función MENOS que incrementará los parámetros pasados: .bucle (@parameters + 1). Dependiendo del escenario, la función también puede ser una disminución: .bucle (@parameters - 1). La función se repetirá y repetirá mientras la condición: cuando (@condición) es emparejado.
Veamos cómo podemos usar un bucle en ejemplos del mundo real..
Supongamos que queremos crear un cuadro de alerta, por lo que definimos los estilos base; Algún relleno y un borde. Nos gustaría crear varias variaciones del cuadro de alerta para transmitir diferentes tipos de alerta. Puede, por ejemplo, tener un cuadro de alerta rojo para mostrar un error, o verde para informar un éxito. Con un bucle, podemos hacer que resulte más conveniente establecer estos estilos.
Para empezar, establezca la lista de colores y variaciones de nombre del cuadro de alerta. Luego cuente el número de variaciones usando el longitud() función.
@colors: # ED5565, # A0D468, # F6BB42, # 5D9CEC; @names: error, éxito, atención, información; @length: length (@colors);
Ahora definimos el bucle para llevar a cabo la lista:
.alerta-variación (@names; @colors; @index) when (iscolor (extracto (@colors, @index))) y (@index> 0) .alert-documentation (@names; @colors; (@index - 1)); // decremento.
Como puedes ver arriba, nuestro bucle se llama .alerta de variación, y requiere algunos parámetros:
Accentsconagua
@names: utilizaremos esta variable para pasar a la lista de variaciones del nombre de alerta.@colores: esta variable pasará los códigos de color de cada nombre respectivo en el @nameslista.@índice: esta variable pasará el número de nombres y colores que tenemos dentro de la lista, y que también usaremos para iterar el bucle.También hemos definido una condición sobre la cual ejecutar el bucle. La primera condición que establecimos en el ejemplo anterior evaluará si los valores pasados a la @colores son colores reales en lugar de valores arbitrarios (en cuyo caso abortaremos el bucle). La siguiente condición establecida detendrá el bucle cuando el @índice decremento ha alcanzado 0.
A continuación, definimos las reglas que conforman los estilos..
.alerta-variación (@names; @colors; @index) when (iscolor (extracto (@colors, @index))) y (@index> 0) .alert-documentation (@names; @colors; (@index - 1)); // decremento. @name: extract (@names, @index); @color: extracto (@colors, @index); .alert - @ name border-color: darken (@color, 10%); color: oscurecer (@color, 30%); color de fondo: @color;
Ya que estamos usando una lista que contiene los colores del cuadro de alerta, necesitaremos usar MENOS extraer() Función para recuperar el color y el nombre correspondientes dentro de cada iteración del bucle. Luego, agregamos el nombre como selector de clase, mientras que el color se aplica a la frontera, color, y el color de fondo propiedades.
Estamos listos y listos para usar el bucle con las entradas:
.alerta-variación (@names; @colors; @length);
Tenemos una lista de cuatro colores junto con una lista de sus respectivos nombres en el @names variable. La iteración de nuestro bucle comienza en el cuarto color de la lista y baja a 0 a medida que decrementamos el @índice en cada iteración. Para cada iteración, el bucle generará el nombre de la clase y la variación de las reglas de estilo, por lo que este ejemplo se compila en:
.alerta-error borde: # e8273b; color: # 99101f; color de fondo: # ed5565; .alert-success border: # 87c940; color: # 537f24; color de fondo: # a0d468; .alert-atencion borde: # f4a911; color: # 986807; color de fondo: # f6bb42; .alert-info border: # 2f80e7; color: # 12509e; color de fondo: # 5d9cec;
Puede agregar más en la lista, y el bucle lo compilará en una nueva variación en un instante.
También puede aplicar un enfoque similar para crear un patrón de estilo de otros elementos de UI en su sitio web, como los Botones, o (quizás) los colores de marca de su sitio de red.
La web está repleta de marcos CSS, y aunque algunos de ellos están diseñados para ser de "talla única", en realidad tal vez no sea así. Muy a menudo, es posible que solo necesite la cuadrícula de respuesta. Entonces, ¿por qué no crear su propia?
Los bucles hacen que crear clases de cuadrícula sea menos complicado. El siguiente es un simple bucle que genera los nombres de clase de columna y determina el porcentaje de ancho de cada uno:
.cuadrícula (@name; @columns; @index: 1) when (@index =< @columns) .grid(@name; @columns; (@index + 1)); .@name-@index width: ( percentage(@index / @columns) );
Observe que ahora estamos realizando un incremento dentro del bucle. Por esta razón, establecemos la condición de bucle con (@index =< @columns) ("Mientras que el índice es menor o igual que el número de columnas") para evitar que la iteración exceda el número de columna.
Utilice este bucle pasando el nombre del selector de clase generado y el número de columna de la cuadrícula. Cuando se trata de nombrar, depende completamente de usted, aunque es posible que desee seguir la convención de Bootstrap de col-sm, col-md, y col-lg o quizás pequeña, medio, y grande Siguiendo el patrón de cimentación, así:
Pantalla solo @media y (ancho mínimo: 360 px) .grid (pequeño; 12);
Aquí hemos usado nuestro .cuadrícula() Recorrer y pasarle los valores. pequeña y 12. Esto se compilará en:
Pantalla de solo media y (ancho mínimo: 360 px) .small-12 ancho: 100%; .small-11 ancho: 91.66666667%; .small-10 ancho: 83.33333333%; … Pequeño-1 ancho: 83.33333333%;
Como puede ver arriba, nuestro bucle genera actualmente solo el ancho de las columnas. También necesitamos flotar estas columnas, y hay varias formas de hacerlo. Por ejemplo, podemos agregar un selector de clase, digamos .columna, anídalo bajo el @medios de comunicación Consulte la definición, y "extiéndala" dentro del bucle.
// el bucle .grid (@name; @columns; @index: 1) when (@index =< @columns) .grid(@name; @columns; (@index + 1)); .@name-@index width: ( percentage(@index / @columns) ); & when ( @index < @columns ) &:extend(.column); // using the loop @media only screen and (min-width: 360px) .column float: left; .grid(small; 12);
Eche un vistazo más de cerca y encontrará que hemos definido la :ampliar Sintaxis bajo un Mixin Guard. Esto asegurará la .columna el selector solo se aplica a las columnas de la 1ª a la 11ª, ya que esperamos que la 12ª columna se extienda completamente sin la flotador interferencia.
El bucle generará la siguiente salida cuando se compile:
Pantalla solo @media y (min-width: 360px) .column, .small-11, .small-10, .small-9, .small-8, .small-7, .small-6, .small-5 , .small-4, .small-3, .small-2, .small-1 float: left; .small-12 ancho: 100%; .small-11 ancho: 91.66666667%;
Si es necesario, también puede personalizar el bucle para generar clases para empujar columnas a la derecha. En Bootstrap, esto se conoce como compensación. Nuevamente, no generaremos esto para la columna 12 ya que compensamos la columna con 100% probablemente no sea práctico.
.cuadrícula (@name; @columns; @index: 1) when (@index =< @columns) .grid(@name; @columns; (@index + 1)); .@name-@index width: ( percentage(@index / @columns) ); & when ( @index < @columns ) &:extend(.column); // Generate the offset classes & when ( @index < @columns ) .@name-offset-@index margin-left: percentage( (@index / @columns) );
Nuestro bucle ahora debe generar un conjunto de nuevas clases cuando se compila:
Pantalla de solo media y (ancho mínimo: 360 px) … pequeño-11 ancho: 91.66666667%; .small-offset-11 margin-left: 91.66666667%; .small-10 ancho: 83.33333333%; .small-offset-10 margin-left: 83.33333333%; .small-9 ancho: 75%; .small-offset-9 margen izquierdo: 75%; …
Para algunos, la idea del bucle puede no ser fácil de entender, para empezar. Y eso es bastante normal; Me tomó algo de tiempo antes de averiguar qué hacer con los bucles. Esperemos que este tutorial te dé un buen comienzo. Aquí hemos mostrado cómo generar patrones de estilo de UI rápidamente. También hemos aprendido cómo crear nuestro propio sistema de cuadrícula, para que podamos ser más conscientes de los estilos en nuestro sitio web en lugar de agregar ciegamente código inflado con un marco que no necesitamos.
Siéntase libre de leer este tutorial un par de veces para descubrir cómo aprovechar el bucle y hacer que su estilo CSS sea más eficiente..
