Sass - Passaggio di blocchi di contenuto a un mixin

Descrizione

Il blocco di stili viene passato al mixin per il posizionamento all'interno degli stili. Nella posizione della direttiva @content , gli stili vengono inclusi nel mixin.

Ambito variabile e blocchi di contenuto

Il blocco di contenuto viene valutato nell'ambito, che viene passato a un mixin in cui viene definito il blocco.

Esempio

Il seguente esempio dimostra l'uso del passaggio di blocchi di contenuto da mixare nel file SCSS -

pass_content.htm

<html>
   <head>
      <title>Mixin example of sass</title>
      <link rel = "stylesheet" type = "text/css" href = "sample.css"/>
   </head>
   
   <body>
      <div class = "block">
         <h1>Example using passing content blocks</h1>
         <p>Different Colors</p>
         <ul>
            <li>Red</li>
            <li>Green</li>
            <li>Blue</li>
         </ul>
      </div>
   </body>
</html>

Quindi, crea il file sample.scss .

sample.scss

@mixin element {
   @content;
}

@include element {
   .block {
      color: green;
   }
}

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

.block {
   color: green;
}

Produzione

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

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

↰ Previous page