Arguments Sass - Mixin

La description

Les valeurs SassScript peuvent être prises comme arguments dans les mixins, qui sont passés lorsque mixin est inclus et sont disponibles comme variables dans le mixin. L'argument est le nom d'une variable, qui est séparé par une virgule lors de la définition d'un mixin. Il existe deux types d'arguments tels que -

Arguments de mots clés
Arguments de variable

Arguments de mots clés

L'argument mot-clé explicite peut être utilisé pour inclure dans les mixins. Les arguments nommés peuvent être passés dans n'importe quel ordre et les valeurs par défaut de l'argument peuvent être omises.

Par exemple, créez un fichier SASS avec le code suivant -

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

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

Le code ci-dessus sera compilé dans le fichier CSS comme indiqué ci-dessous -

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

Arguments de variable

L'argument variable est utilisé pour passer n'importe quel nombre d'arguments à mixin. Il contient des arguments de mots clés passés à la fonction ou à mixin. Les arguments de mots-clés passés au mixin sont accessibles à l'aide de la fonction de mots-clés ($ args) qui renvoient des valeurs mappées à String.

Par exemple, créez un fichier SASS avec le code suivant -

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

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

Le code ci-dessus sera compilé dans le fichier CSS comme indiqué ci-dessous -

.container {
   background-color: magenta;
}

Exemple

L'exemple suivant illustre l'utilisation d'arguments dans le fichier SCSS -

argument.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>

Ensuite, créez le fichier argument.scss .

argument.scss

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

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

Vous pouvez dire à SASS de regarder le fichier et de mettre à jour le CSS chaque fois que le fichier SASS change, en utilisant la commande suivante -

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

Ensuite, exécutez la commande ci-dessus; il créera automatiquement le fichier argument.css avec le code suivant -

style.css

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

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -

Enregistrez le code html ci-dessus dans argument.htm fichier.
Ouvrez ce fichier HTML dans un navigateur, une sortie s'affiche comme indiqué ci-dessous.

↰ Previous page