Sass - Definizione di un mixin

Descrizione

La direttiva @mixin viene utilizzata per definire i mixin. Include opzionalmente le variabili e l'argomento dopo il nome del mixin.

Esempio

Il seguente esempio dimostra l'uso di @mixin nel file SCSS -

sample.htm

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

   <body>
      <div class = "cont">
         <h1>Example using include</h1>
         <h3>Directive is used to define the Mixins, it includes variables and argument optionally.</h3>
      </div>
   </body>
</html>

Quindi, crea il file sample.scss .

sample.scss

@mixin style {
   .cont{
      color: #77C1EF;
   }
}
@include style;

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\sample.scss:sample.css

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

sample.css

.cont {
   color: #77C1EF;
}

Produzione

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

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

↰ Previous page