Para crear argumentos opcionales para un SASS @mixin, se debe pasar el mixin declarado y se debe incluir.
El siguiente enfoque lo explicará claramente.
Sintaxis:
@mixin function-name($var1, $x:val){ /* stylesheet properties */ } @include function-name(value, 0);
Enfoque: la asignación de valores nulos en @mixin incluye
- Podemos hacer que un argumento de mixin sea opcional definiendo su valor predeterminado para que @include no pase el argumento.
- Pasar nulo o 0 o ningún argumento pasado por @include de mixin llevó a argumentos opcionales.
- Los argumentos opcionales tienen un nombre de variable seguido de dos puntos y una y una expresión SassScript
Ejemplo 1: El siguiente ejemplo ilustra el enfoque anterior.
Archivo SASS: estilo.scss
/* Here $x:5px Optional Arguments*/ @mixin shadowbox($hoff, $voff, $blur, $spread, $color, $x:5px){ -webkit-box-shadow: $hoff $voff $blur $spread $color; -moz-box-shadow: $hoff $voff $blur $spread $color; box-shadow: $hoff $voff $blur $spread $color; border: $x solid $color; /* null is passed in mixin @include*/ div{ @include shadowbox(0, 8px, 6px, -6px, black, null); display: block; }
Archivo CSS compilado: estilo.css
div{ -webkit-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black; border: 5px solid black; display: block; }
Ejemplo 2: El siguiente ejemplo ilustra el enfoque anterior.
Archivo SASS: estilo.scss
/* Here $attach:fixed Optional Arguments*/ @mixin backgroundstretch( $bgsize, $attach:fixed ){ background-attachment: $attach; background-position: center; -webkit-background-size: $bgsize; -moz-background-size: $bgsize; -o-background-size: $bgsize; background-size: $bgsize; } body { color:$grey; font-family: Helvetica, sans-serif; background-image: url('/img/backimg.jpg'); background-repeat: no-repeat; /* 0 is passed in mixin @include*/ @include backgroundstretch(cover, 0); }
Archivo CSS compilado: estilo.css
body { color: #919191; font-family: Helvetica, sans-serif; background-image: url("/img/backimg.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-size: cover; }
Referencia: https://sass-lang.com/documentation/at-rules/mixin#opcional-argumentos
Publicación traducida automáticamente
Artículo escrito por VigneshKannan3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA