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.