Cómo utilizar Sass Mixins y Loops

Mi actual historia de amor con Sass continúa y lo hemos llevado al siguiente nivel. Lo que comenzó como una forma más rápida y con menos sintaxis de escribir mi CSS, ahora se ha convertido en una relación mucho más comprometida.

Estamos listos para experimentar un poco. Recientemente probé dos de las funciones más útiles de Sass, Mixins y Loops .

Mixins y Loops

Con Mixins y Loops, las líneas se vuelven un poco borrosas entre CSS y otro lenguaje de codificación como JavaScript. Cuando piensa en su código en términos de funciones que define en un lugar y llama en otro, o bucles que iteran sobre una pieza un código un cierto número de veces, probablemente no piense en CSS. Sé que nunca lo hice.

CSS es para diseñar. ¿Por qué alguna vez necesitaría recorrer un estilo o llamar a un estilo definido en otro lugar? Eso ni siquiera tiene sentido en términos de CSS. Es totalmente ajeno. Además, ¿no hay algo sobre la 'separación de preocupaciones' (SoC)?

Pero pensando más en SoC, tal vez esta forma tenga más sentido.

CSS debería manejar el estilo del sitio, ¿verdad? Entonces, ¿por qué he estado usando el .style()método de JavaScript o el .css()método de jQuery para manejar esto? ¿Por qué no puedo cambiar dinámicamente el estilo dentro de CSS?

Bueno, Sass te acerca unos pasos a eso. Sea cual sea el lado de la valla de SoC en el que se caiga, Mixins y Loops en Sass pueden ahorrarle mucho tiempo y esfuerzo al diseñar sus sitios.

Mixins

Empezaré con Mixins. En los términos más simples, puede pensar en un Mixin como una función de JavaScript para CSS. Define un Mixin en algún lugar de su código Sass y le pasa los parámetros a los que hace referencia dentro del Mixin. Luego, en algún otro lugar del código Sass, lo llama Mixin y pasa argumentos que corresponden a los parámetros y todo se ejecuta. ¿Confuso? Sí, un poco, así que veamos un ejemplo.

Primero define un Mixin en Sass. Esto se hace con =. La sintaxis de una definición de Mixin se ve así (recuerde que $se usa en Sass para definir variables):

=mixinName($param1, $param2, $etc) Sass code goes here...

Este Mixin se puede llamar en cualquier otro lugar de su código que lo necesite. Y pasa los argumentos que necesita Mixin y Sass convierte todo eso en CSS.

Aquí hay un ejemplo de un Mixin que escribí para definir una caja básica.

=box($height, $width, $backgroundColor) height: $height width: $width background-color: $backgroundColor margin-bottom: 5px border: 1px solid black

He definido mis tres parámetros después del nombre del Mixin, en este caso lo es box. Luego tengo el código Sass, algunos de los cuales llaman a los parámetros. Ahora puedo usar este Mixin en otra parte de mi código Sass siempre que quiera definir una caja con estas características. Puedo llamar al Mixin tantas veces como quiera, pasando diferentes argumentos cada vez. Llamas a Mixin con el +personaje.

.box-1 +box(100px, 200px, tomato) .box-2 +box(50px, 100px, rbga(100, 255, 255, 0.5)

La página ahora representará estas propiedades CSS en las partes de la página con las clases .box-1y .box-2. Aquí está el resultado.

Puede ser un poco decepcionante con solo 2 cajas. Pero si tiene un sitio donde necesita definir varios elementos similares, Mixins puede ahorrarle mucho tiempo. Y si necesita cambiar o agregar una propiedad a todo esto, solo tiene un lugar adonde ir.

Si quisiera convertir estos cuadros en óvalos agregando una border-radius propiedad, solo lo hago una vez en el Mixin en lugar de para cada cuadro en mi CSS.

Bucles

La segunda característica de Sass que se cubre aquí es Loops y son exactamente lo que crees que son. El concepto es el mismo que en la mayoría de los otros lenguajes de programación. Tiene un fragmento de código que debe repetirse un cierto número de veces.

Sass también tiene estas opciones y se denominan directivas de control . Empiezan con el @símbolo y la sintaxis es bastante fácil de entender. Estos incluyen una @if, @for, @each, y @while. Cubriré el @foraquí hoy, pero puede leer más sobre todos estos aquí.

La @fordirectiva de control viene en dos opciones diferentes, las opciones toy through. Esto es en referencia a land> of the loop. to is exclusive and through is inclusive.

The syntax for the through version of an @for loop is as follows:

@for  from  through  Sass code goes here...

The to version is the same. Just replace through with to.

The $variable can be whatever name you want it to be. The rt>; and values should be integers.

Here is an example I wrote that creates 10 divs on the page, each wider than the last and a slightly different color. I also included them in a Mixin so I could pass in parameters and call it wherever I needed to.

=graph($height, $baseColor) @for $i from 1 through 10 .line-#{$i} height: $height width: 2em * $i background-color: rgba($i * ($baseColor + 20), $i * ($baseColor + 10), $i * ($baseColor + 5), 1)

This is creating 10 different CSS selectors of .line-1, .line-2, and so forth. Each selector has the height specified by $height, a width of 2em * the value of i and a background color based on the $baseColornumber passed in.

I then call this Mixin just like any other

+graph(10px, 10)

And here is the result:

Original text


You can also add things like CSS pseudo classes to these loops. Here is another example with the :hover pseudo class.

=stack @for $i from 1 through 30 .stack-#{$i} position: absolute height: 100px width: 100px top $i + 10px left $i + 10px background-color: rgba($i * 1, $i * 2, $i * 3, 1) &:hover background-color: rgba($i * 2, $i * 4, $i * 8, 1)

Call this Mixin like so (no arguments needed):

+stack

The loop will run once when the page renders and then again on each individual .stack element when the mouse hovers over it. This changes the background color.

It was much easier and faster to write this Mixin with an @for loop rather than writing out 299 lines of CSS. And again, if I want to change something for all of them I do it once instead of 299 times.

The result is underwhelming since you can’t hover on the screenshot. Here is a CodePen with all the above examples.

These are only two of the great tools that Sass offers. They can help you create some great looking and functional CSS in a fraction of the time.

I hope you enjoyed this post. Please let me know if you have any questions. Thanks!