Sass - Argomenti Mixin

Descrizione

I valori SassScript possono essere presi come argomenti in mixin, che vengono passati quando è incluso mixin e sono disponibili come variabili all'interno del mixin. L'argomento è il nome di una variabile, separato da virgola durante la definizione di un mixin. Esistono due tipi di argomenti come:

Argomenti delle parole chiave
Argomenti variabili

Argomenti delle parole chiave

L'argomento della parola chiave esplicita può essere utilizzato per includere nei mixin. Gli argomenti, che sono nominati possono essere passati in qualsiasi ordine e i valori predefiniti di argomento possono essere omessi.

Ad esempio, crea un file SASS con il seguente codice:

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

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

Il codice sopra verrà compilato nel file CSS come mostrato di seguito -

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

Argomenti variabili

L'argomento variabile viene utilizzato per passare un numero qualsiasi di argomenti a mixin. Contiene argomenti di parole chiave passati alla funzione o mixin. È possibile accedere agli argomenti delle parole chiave passati al mixin utilizzando la funzione keywords ($ args) che restituisce valori mappati su String.

Ad esempio, crea un file SASS con il seguente codice:

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

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

Il codice sopra verrà compilato nel file CSS come mostrato di seguito -

.container {
   background-color: magenta;
}

Esempio

L'esempio seguente mostra l'uso degli argomenti nel file SCSS:

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

Quindi, crea il file argomento.scss .

argomento.scss

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

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

Puoi dire a SASS di guardare il file e aggiornare il CSS ogni volta che il file SASS cambia, utilizzando il seguente comando:

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

Successivamente, esegui il comando precedente; creerà automaticamente il file argomento.css con il seguente codice:

style.css

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

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:

Salva il codice html sopra indicato in argument.htm file.
Apri questo file HTML in un browser, viene visualizzato un output come mostrato di seguito.

↰ Previous page