Cuando nos especializamos en desarrollo web, conocemos qué son los mixin en SASS (Syntactically Awesome Style Sheets), un aspecto muy importante del preprocesador, ya que nos ayudan a potenciar las herramientas que ofrece la hoja de estilos de CSS. De esta manera, vamos a poder desarrollar ecosistemas web mucho más compactos, interesantes y atractivos para quien desea desarrollar una página o un sitio web.
Los mixin pueden dividirse tres tipos: el mixin sin parámetro, el mixin con parámetro y el mixin como bloque.
Qué son los mixin y sus tipos
Entre todos los elementos que caracterizan a SASS o Syntactically Awesome Style Sheets (la sintaxis, las variables, el anidamiento, la especialización de un elemento, los operadores, los comentarios y las funciones built-in), nos encontramos con los mixin. Se trata de herramientas que nos permiten mezclar propiedades de clase y definir funciones de generación de código CSS (Cascading Style Sheets).
Estas funcionalidades se dividen en tres tipos, los cuales se presentan de diferente manera e incluyen herramientas principales, como mixin sin parámetro, mixin con parámetro y mixin como bloque, que tienen que emplear la directiva @include para integrar un mixin.
Mixin sin parámetro
En primer lugar, encontramos el mixin sin parámetro del SASS (Syntactically Awesome Style Sheets), el cual, como su nombre revela, nos dice que no constituye ningún tipo de parámetro. Este mixin nos permite crear varios elementos, que van a integrar todos los elementos que vamos a declarar en un principio, como puede ser la integración del @mixin clearfix a continuación.
La mejor forma para entender qué son los mixin sin parámetro es ver cómo funciona en acción, como puedes encontrar en el siguiente extracto de código:
@mixin clearfix {
display: inline-block;
&:after {...}
* html & {height: 1px}
}
.menu { @incluide clearflix; }
.menu {display: inline -bloc;}
.menu:after {...}
*html .menu {height: qpx}
Mixin con parámetro
Por otro lado, y en contraste con el mixin sin parámetro de SASS (Syntactically Awesome Style Sheets), tenemos el mixin con el uso de los parámetros, que podemos instanciar dentro de parámetros. En este caso, vas a empezar a parametrizar y a relacionarlo con un valor por defecto.
El tipo de mixin con parámetro es útil, ya que no nos hará escribir las particularidades de cada uno de los navegadores cada vez que los empleamos, sino que podremos integrarlo en una sola variable.
@mixin border-radius ($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius (10px);}
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
Mixin como bloque
Otro tipo es el de mixin con bloque, que tiene el objetivo de reservar espacio dentro de la escritura de texto de la hoja de estilos y de HTML. Para hacer esta reserva de espacio, vamos a integrar la variable de @content, la cual va a empezar a sustituir e integrar el elemento que hemos pasado con la variable de @include. Por eso, la definimos como un marcador dentro de la herramienta SASS (Syntactically Awesome Style Sheets).
@mixin apply-to-ie-only {
html.ie {
@content;
}
}
@include apply-to-ie-only {
#logo {
background-image: url(/logo.gif);
}
}
html.ie #logo {
backgorund-image: irl(/logo.gif);
}Si quieres seguir conociendo el resto de elementos y funcionalidades que hacen de SASS la gran herramienta que es, te invitamos a leer nuestro artículo acerca de los 7 elementos más importantes de SASS.
Aprende con nosotros
Ahora que sabes qué son los mixin y por qué son tan importantes para declarar las funciones dentro del trabajo con el preprocesador de SASS, querrás conseguir un nivel más alto de especialización en las herramientas que puedes utilizar para trabajar con CSS y HTML en el desarrollo web. Para ello, no te pierdas el Desarrollo Web Full Stack Bootcamp, la formación de alta intensidad con la que te convertirás en un experto en menos de un año. ¡Anímate a cambiar tu vida y pide más información!
