Sass - Compreso un mixin

Descrizione

La direttiva @include viene utilizzata per includere il mixin nel documento. Viene preso il nome di mixin e vengono passati argomenti opzionali. Gli stili definiti dal mixin possono essere inclusi nella regola corrente.

Esempio

Il seguente esempio dimostra l'uso dell'inclusione di un 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">
         <h2>Example using include</h2>
         <h3>Different Colors</h3>
         <ul>
            <li>Red</li>
            <li>Green</li>
            <li>Blue</li>
         </ul>
      </div>
   </body>
</html>

Quindi, crea il file sample.scss .

sample.scss

@mixin style {
   .cont{
      background-color: #77C1EF;
      color: #ffffff;
   }

   h3 {
      color: #ffffff;
   }
}
@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 {
   background-color: #77C1EF;
   color: #ffffff;
}

h3 {
   color: #ffffff;
}

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