Mixin nos permite crear un código CSS que se puede reutilizar según los requisitos. Los argumentos son los nombres de las variables escritos al definir un mixin. Estos están separados por comas.
Los argumentos de mixin son los valores de SassScript que están disponibles como variables y que se pasan cuando se incluye mixin. Hay dos tipos diferentes de argumentos mixin.
- Argumentos de palabras clave
- Argumentos variables
Argumentos de palabras clave: Los argumentos se utilizan para incluir en mixins. Estos tipos de argumentos, si se nombran, se pueden pasar en cualquier orden y se pueden omitir sus valores predeterminados. Veamos un ejemplo para una mejor comprensión.
Código SASS:
@mixin design($color, $height:1px) {
color: red;
border: $height solid black;
height: 300px;
}
.temp {
@include design($color:red, $height:1px);
}
Este código SASS se compilará en código CSS de la siguiente manera.
Código CSS: Nombre el siguiente archivo como «style.css».
CSS
.temp {
color: red;
border: 1px solid black;
height: 300px;
}
Código HTML: enlacemos este archivo CSS (style.css) en el siguiente documento HTML.
HTML
<!DOCTYPE html> <html> <head> <title>Keyword Arguments</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h2>Welcome To GFG</h2> <p class="temp">GeeksforGeeks</p> </body> </html>
Producción:
Argumentos variables: cuando necesitamos pasar un número desconocido de argumentos a mixin, usamos argumentos variables. Contiene todos los argumentos de palabras clave necesarios para pasar. Se puede acceder a estos argumentos de palabras clave más tarde usando la función de palabras clave ($args) que devuelve valores en forma de un mapa hash. Veamos un ejemplo para una mejor comprensión.
código SASS:
@mixin design($var) {
color: $var;
}
$values: red, blue, green;
.temp {
@include design($values...);
}
Código CSS:
CSS
.temp {
color: red;
}
Código HTML: usemos este archivo CSS (style.css) en un archivo HTML.
HTML
<!DOCTYPE html> <html> <head> <title>Variable Arguments</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h2 class="temp">Welcome To GFG</h2> <p>Online Learning Platform</p> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por parthmanchanda81 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA