9 min to read
Mixins Mágicos!
Mixins
Haciendo magia
Hola amigos! Como lo prometido es deuda acá estoy acercando el post para compartir algunas #experiencias y #tips para mis queridos @mixins poderosos que nos brinda SASS … toma pa vo
¿Qué es un mixin? Un mixin representa un bloque de código que nos permite agrupar declaraciones css que sabemos que vamos a reutilizar a lo largo de nuestro proyecto.
Entonces para crear nuestro primer mixin podríamos crear dentro de la carpeta styles, un archivo llamado _mixins.scss y escribir un bloque para un elemento determinado, por ejemplo un titulo:
@mixin title {
font-size: 30px;
line-height: 22px;
color: $random-color-from-previous-post;
font-weight: bold;
}
Entonces cada vez que necesitemos incluir un titulo en nuestro template, le agregaremos a la clase que lo contiene, el mixin, nuestro html podría ser algo como
<h1 class="title">Title</h1>
y vamos a pedirle que renderice ese título con nuestra convención declarada en nuestro mixin en nuestro .scss:
.title {
@include title;
}
Con sólo esa linea ya estamos renderizando las 4 css rules que definimos en nuestro mixin. Cada vez que tengamos un elemento que deseemos renderizar con las características de ese title, solo escribimos @include title; y la magia sucede
Ahora, podemos ir más allá y empezar a escalar o flexibilizar nuestro mixin. Siiii hay mas magia!
Si por ejemplo queremos mantener nuestra estructura de títulos pero queremos que pequeñas cosas puedan variar, sin alterar esa estructura, podríamos modificar nuestro mixin para que sea parametrizable, entonces:
@mixin title($color: blue) {
font-size: 30px;
line-height: 22px;
color: $color;
font-weight: bold;
}
Alllllta magia ahí… con eso recien hicimos que nuestro mixin esté preparado que un color de título por defecto (azul). Y, si le pasamos otro color desde otra página con otro css seguiremos reutilizando nuestro mixin dinámico:
.title {
@include title(red);
}
A su vez, podemos crear otro pequeño mixin de complemento:
@mixin bottom-line($color: blue, $margin: 1rem, $padding: 1rem 0) {
margin: $margin;
border-bottom: 3px solid $color;
padding: $padding;
}
De esa forma si tenemos otro título que si queremos que dibuje una línea debajo del título, con nuestro mixin ya creado, solo debemos escribir:
.title {
@include title(red);
@include bottom-line(red, 2rem, 1rem);
}
Nota: Si no le pasamos parametros, también funcionaría con los valores por default @include bottom-line();
Nesting
Siiii satamente! Podemos anidar e incluir otros mixins dentro de nuestro mixin si así lo deseamos, por ejemplo creamos un mixin estilo link:
@mixin special-link($hover-color: white) {
text-decoration: underline;
cursor: pointer;
&:hover {
background-color: $hover-color;
}
}
Lo creamos como mixin porque la idea es usarlo estas reglas de link en cualquier elemento, no sólo en los títulos.
@mixin title($color: blue, $hover-color) {
@include special-link($hover-color);
font-size: 30px;
line-height: 22px;
color: $color;
font-weight: bold;
}
Entonces ahora, cada vez que usemos nuestro mixin title siempre va a tener incluido las caracteristicas de link, y no sólo eso, sino que también podremos definir el color del hover si deseamos uno diferente al que elegimos por defecto (el que casis siempre se aplica es el que vamos a elegir por defecto):
.title {
@include title(red, black);
}
Con eso vamos a renderizar nuestro título con link y hover color negro.
A medida que vamos definiendo las reglas de nuestro proyecto, podemos ver qué tanto nos conviene parametrizar y flexibilizar nuestros mixins, y que tanto nos conviene acoplar opciones dentro de los mismos. Por ejemplo la anidación no tiene límites, si queremos seguir el primer ejemplo, en vez de incluir 2 mixin podriamos agregar el mixin bottom-line y special-link dentro del mixin title principal:
@mixin title($color: blue, $hover-color, $size: 30px) {
@include special-link($hover-color);
@include bottom-line(red, 2rem, 1rem);
font-size: $size...
}
De esa manera solo invocaríamos al mixin title, si es que siempre queremos incluir por defecto los otros mixins (de special-link, bottom-line, etc) y nos evitamos agregar siempre los mismos 2 o 3 mixins cada vez que decoramos un título.
De hecho si empezamos a notar que casi siempre incluimos los mismos mixin a los mismos elementos, lo ideal es anidarlos directamente en el mixin y podemos meter una lógicaaaa para los casos en los que no los queremos… que pasó? te quedaste de cara????
Argumentos
Veamos como quedaría!!!
@mixin title($color: blue, $hover-color, $size: 30px, $include-specials: true) {
@if ($include-specials) {
@include special-link($hover-color);
@include bottom-line(red);
}
font-size: $size...
blabla...
}
Ahora en nuestras clases nos queda elegir cuando deseemos que los special mixins para link y para bottom line NO sean agregados
.title {
@include title(red, black, 30px, false);
}
@content
Así como en ANGULAR tenemos content projection o transclusion con ng-content, aca tenemos algo parecido! con @content lo que hacemos es permitir proyectar otros bloques de código en un bloque css por ej, veamos:
@mixin small($width: 320px) {
@media only screen and (min-width: $width) {
@content;
}
}
@mixin tablet($width: 768px) {
@media only screen and (min-width: $width) {
@content;
}
}
@mixin desktop($width: 992px) {
@media only screen and (min-width: $width) {
@content;
}
}
Y lo invocamos:
@include small(345px) {
font-size: 20px;
...
}
@include tablet() {
bla bla
...
}
@include desktop(360px) {
ble ble
...
}
Al tener nuestro @content en un mixin, podemos ahorrarnos las media queries que después de mucho tiempo pueden ser muy tediosas, tener que escribirlas en cada css, o en cada clase es un poco mucho jajajaja de esta forma solo escribimos include small..o lo que sea que le pongamos, eso es elección de tu dev favorito :D
Asimismo, como vinimos viendo hasta ahora, podríamos tranquilamente incluir estos mixins del tipo media query en nuestros propios mixins, para que una vez que invoquemos nuestros mixins, no debamos preocuparnos del breakpoint ya que el mixin automáticamente se adaptará a cada escenario.
#experiencia
El otro día tuve que renderizar unas marcas muy visuales dentro de una pantalla, recuerdo que eran como 4 marcas, muy muuuuy similares, cassssi iguales pero que las diferenciaba la posicion de cada una, que hice? sale mixinnnn con fritas po favo
Pude renderizar las 4 marks con algo como:
@include mark($top, $left);
y listooo, realmente me ahorré todo el css de las marcas en sí, y solo le pasaba como dinámica la posición. Tirate un mixin daaaale
Conclusión
Como vemos los mixins son totalmente escalables y flexibles a cualquier elemento, tranquilamente podemos renderizar y dibujar estructuras que sabemos que venimos repitiendo o notamos en el proyecto que trabajamos que se empiezan a repetir mucho a lo largo de los estilos en general, ahí es cuando nos damos cuenta que es mejor aplicar @mixins.
La idea es siempre manejar mixins no tan potentes o bazooka de entrada, tampoco queremos matar una mosca con un rifle o si? o no? o si? Tampoco seamos muy fanáticos de los argumentos porque después el mixin nos queda cualquier cosa y le tenemos que pasar 10 argumentos para que haga algo mmmmmmm no, ASI NO. La idea es pasarle 2 o 3 parametros nomas en lo posible, si vemos que necesitamos expandir, mas vale creemos otro mixin, simple, puro, que hasta podamos reutilizar en otro lado.
Veamos siempre que podamos lo que realmente se usa y sirve, recordemos el principio YAGNI
De regalo por leer te ganaste la mosca con el rifle
