Sass - Estendi direttive

Descrizione

La direttiva @extend viene utilizzata per condividere regole e relazioni tra i selettori. Può estendere tutti gli altri stili di classe in una classe e può anche applicare i propri stili specifici. Di seguito sono riportati i tipi di estensione:

Tipi e descrizione Sintassi Codice compilato

Extending Complex Selectors

Può estendere il selettore che consiste solo in un singolo elemento o selettore di classe.

 
h2 {
   font-size: 40px;
}

.container{
   @extend h2
}
 
h2, .container {
   font-size: 40px;
}

Multiple Extends

Più di un selettore può essere esteso da un singolo selettore.

 
.style {
   font-size: 25px;
   font-style: italic;
}

h2 {
   color: #61C8E1;
}

.container {
   @extend .style;
   @extend h2
}
 
.style, .container {
   font-size: 25px;
   font-style: italic;
}

h2, .container {
   color: #61C8E1;
}

Chaining Extends

Il primo selettore esteso dal secondo selettore e il secondo selettore è esteso dal terzo selettore quindi questo è noto come concatenamento si estende.

 
.style {
   font-size: 25px;
   font-style: italic;
}

h2 {
   color: #61C8E1;
   @extend .style
}

.container {
   @extend h2
}
 
.style, h2, .container {
   font-size: 25px;
   font-style: italic;
}

h2, .container {
   color: #61C8E1;
}

Selector Sequences

Il selettore annidato può utilizzare @extend da solo.

Merging Selector Sequences

Unisce due sequenze, ovvero una sequenza estende un'altra sequenza che è presente in un'altra sequenza.

 
.style {
   font-size: 25px;
   font-style: italic;
   color: #61C8E1;
}

h2 .container {
   @extend .style
}
.container .style a {
   font-weight: bold;
}

#id .example {
   @extend a;
}
 
.style, h2 .container {
   font-size: 25px;
   font-style: italic;
   color: #61C8E1;
}
.container .style a, .container .style #id
.example, #id .container .style .example {
   font-weight: bold;
}

@extend - Only Selectors

Il suo carattere percentuale (%) può essere utilizzato ovunque un id o una classe, impedisce il rendering del proprio set di regole in CSS.

 
.style a%extreme {
   font-size: 25px;
   font-style: italic;
   color: #61C8E1;
}

.container {
   @extend %extreme;
}
 
.style a.container {
   font-size: 25px;
   font-style: italic;
   color: #61C8E1;
}

The !optional Flag

Il flag opzionale! Viene utilizzato per consentire a @extend di non creare alcun nuovo selettore.

 
h2.important {
   @extend .style !optional;
}
 
A blank compile page gets display.

@extend in Directives

Se @extend viene utilizzato all'interno di @media , può estendere solo i selettori presenti all'interno degli stessi blocchi direttiva.

 
@media print {
   .style {
      font-size: 25px;
      font-style: italic;
   }
   
   .container {
      @extend .style;
      color: #61C8E1;
   }
}
 
@media print {
   .style, .container {
      font-size: 25px;
      font-style: italic;
   }

   .container {
      color: #61C8E1;
   }
}

Esempio

L'esempio seguente mostra l'uso di @extend nel file SCSS:

estendere.htm

<!doctype html>
   <head>
      <title>Extend Example</title>
      <link rel = "stylesheet" href = "extend.css" type = "text/css" />
   </head>

   <body class = "container">
      <h2>Example using Extend</h2>
      <p class = "style">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
   </body>
</html>

Quindi, crea il file extent.scss .

estendere.scss

.style{
   font-size: 30px;
   font-style: italic;
}

h2{
   color: #787878;
   @extend .style

}

.container{
   @extend h2
}

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

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

extended.css

.style, h2, .container {
   font-size: 30px;
   font-style: italic;
}

h2, .container {
   color: #787878;
}

Produzione

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

  • Salva il codice html sopra indicato in extend.html file.

  • Apri questo file HTML in un browser, viene visualizzato un output come mostrato di seguito.