Sass - Argumentos Mixin

Descripción

Los valores de SassScript se pueden tomar como argumentos en mixins, que se pasan cuando se incluye mixin y están disponibles como variables dentro del mixin. El argumento es el nombre de una variable, que está separada por comas al definir un mixin. Hay dos tipos de argumentos como:

Argumentos de palabras clave
Argumentos variables

Argumentos de palabras clave

El argumento de palabra clave explícita se puede usar para incluir en mixins. Los argumentos que se nombran se pueden pasar en cualquier orden y se pueden omitir los valores predeterminados de argumento.

Por ejemplo, cree un archivo SASS con el siguiente código:

@mixin bordered($color, $width: 2px) {
   color: #77C1EF;
   border: $width solid black;
   width: 450px;
}

.style  {
   @include bordered($color:#77C1EF, $width: 2px);
}

El código anterior se compilará en el archivo CSS como se muestra a continuación:

.style {
   color: #77C1EF;
   border: 2px solid black;
   width: 450px;
}

Argumentos variables

El argumento variable se utiliza para pasar cualquier número de argumentos a mixin. Contiene argumentos de palabras clave que se pasan a la función o al mixin. Se puede acceder a los argumentos de palabras clave pasados al mixin usando la función de palabras clave ($ args) que devuelven valores asignados a String.

Por ejemplo, cree un archivo SASS con el siguiente código:

@mixin colors($background) {
   background-color: $background;
}

$values: magenta, red, orange;
.container {
   @include colors($values...);
}

El código anterior se compilará en el archivo CSS como se muestra a continuación:

.container {
   background-color: magenta;
}

Ejemplo

El siguiente ejemplo demuestra el uso de argumentos en el archivo SCSS:

argumento.htm

<html>
   <head>
      <title> Mixin example of sass</title>
      <link rel = "stylesheet" type = "text/css" href = "argument.css"/>
   </head>

   <body>
      <div class = "style">
         <h1>Example using arguments</h1>
         <p>Different Colors</p>
         <ul>
            <li>Red</li>
            <li>Green</li>
            <li>Blue</li>
         </ul>
      </div>
   </body>
</html>

A continuación, cree el archivo argumento.scss .

argumento.scss

@mixin bordered($width: 2px) {
   background-color: #77C1EF;
   border: $width solid black;
   width: 450px;
}

.style  {
   @include bordered(2px);
}

Puede decirle a SASS que observe el archivo y actualice el CSS cada vez que cambie el archivo SASS, utilizando el siguiente comando:

sass --watch C:\ruby\lib\sass\argument.scss:argument.css

A continuación, ejecute el comando anterior; creará el archivo argument.css automáticamente con el siguiente código:

style.css

.style {
   background-color: #77C1EF;
   border: 2px solid black;
   width: 450px;
}

Salida

Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:

Guarde el código html dado anteriormente en argument.htm archivo.
Abra este archivo HTML en un navegador, se muestra una salida como se muestra a continuación.

↰ Previous page