En este artículo, vamos a explicar y ver el uso de Mixin. Mixin se usa en Sass, que es un preprocesador de CSS. Mixin funciona como una función en Sass y nos ayuda a reducir la escritura del mismo código una y otra vez.
Sintaxis
@mixin <name>(<parameter>){
// Code...
}
name: Tenemos que proporcionar el nombre de nuestro mixin para que podamos usarlo luego en las otras clases.
parámetro: Aquí el parámetro es opcional, pero si tenemos que usarlo, tendremos una variable con el signo $Ex; $valor.
Ahora comprendamos cómo podemos usar mixin en nuestros proyectos. Entonces, primero debemos entender que mixin es un componente exclusivo de SASS, y lo usaremos en un archivo separado y luego lo incluiremos en nuestra página HTML. Entonces, en los ejemplos dados a continuación, usaremos el Sass compilado.
Consideremos un escenario donde tenemos múltiples div, y tenemos que alterar algunas propiedades como border-radius, background-colour, etc. luego tenemos que escribir el mismo código una y otra vez para cada clase. Aquí podemos usar el mixin y usar el mixin en cada clase donde necesitamos cambiar las propiedades de CSS. Tenemos que cuidar una cosa más mientras usamos mixin, cuando tenemos que usar mixin, entonces tenemos que usar una palabra clave @include , luego el nombre de mixin y pasar el parámetro requerido.
Código Sass
// Use of mixin
@mixin bg-color($color) {
background-color: $color;
}
.div1 {
width: 100px;
height: 100px;
@include bg-color(red); // mixin call
}
.div2 {
width: 100px;
height: 100px;
@include bg-color(green); // mixin call
}
Compila el código CSS del código Sass anterior
.div1 {
width: 100px;
height: 100px;
background-color: red;
}
.div2 {
width: 100px;
height: 100px;
background-color: green;
}
El código SASS escrito arriba es el método real para crear mezclas. Ahora, en el ejemplo, usaremos el código SASS compilado que aparecerá en CSS normal.
Ejemplo 1: En este ejemplo, usaremos un archivo CSS compilado.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mixins</title>
</head>
<style>
.div1 {
width: 150px;
height: 50px;
background-color: red;
text-align: center;
}
.div2 {
width: 150px;
height: 50px;
background-color: green;
text-align: center;
}
</style>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<div class="div1">
<p>GeeksforGeeks</p>
</div>
<div class="div2">
<p>GeeksforGeeks</p>
</div>
</body>
</html>
Producción:
Podemos usar el mixin de otra manera en la que inicialmente le daremos el valor a las propiedades para luego usarlo en otras clases. Tenga en cuenta que podemos tener tantos mixins como queramos.
código descarado
// use of mixin
@mixin bg-color($color) {
background-color: $color;
}
@mixin border-radius($radius) {
border-radius: 10px;
}
.div1{
width: 100px;
height: 100px;
@include bg-color(red); // mixin call
@include border-radius(10px); // mixin call
}
.div2{
width: 100px;
height: 100px;
@include bg-color(green); // mixin call
@include border-radius(10px); // mixin call
}
Compila el código CSS del código Sass anterior
.div1 {
width: 100px;
height: 100px;
background-color: red;
border-radius: 10px;
}
.div2 {
width: 100px;
height: 100px;
background-color: green;
border-radius: 10px;
}
Ejemplo 2: En este ejemplo, inicialmente le hemos dado el valor de border-radius 10px al momento de crear el mixin, y luego lo hemos usado en las clases div.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.div1 {
width: 150px;
height: 50px;
background-color: red;
border-radius: 5px;
text-align: center;
}
.div2 {
width: 150px;
height: 50px;
background-color: green;
border-radius: 5px;
text-align: center;
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<div class="div1">
<p>GeeksforGeeks</p>
</div>
<div class="div2">
<p>GeeksforGeeks</p>
</div>
</body>
</html>
Producción:
Entonces, esta fue una descripción básica de cómo podemos usar el mixin en nuestros proyectos para facilitar nuestras tareas para proyectos más grandes, también podemos usar múltiples propiedades a la vez en el mixin y usarlo después.