Sass - estender diretivas

Descrição

A diretiva @extend é usada para compartilhar regras e relacionamentos entre seletores. Ele pode estender todos os estilos de outras classes em uma classe e também pode aplicar seus próprios estilos específicos. A seguir estão os tipos de extensão -

Tipos e descrição Sintaxe Código compilado

Extending Complex Selectors

Ele pode estender o seletor que consiste em apenas um único elemento ou seletor de classe.

 
h2 {
   font-size: 40px;
}

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

Multiple Extends

Mais de um seletor pode ser estendido por um único seletor.

 
.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

O primeiro seletor estendido pelo segundo seletor e o segundo seletor é estendido pelo terceiro seletor, portanto, isso é conhecido como extensão de encadeamento.

 
.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

O seletor aninhado pode usar @extend por conta própria.

Merging Selector Sequences

Ele mescla duas sequências, ou seja, uma sequência estende outra sequência que está presente em outra sequência.

 
.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

Seu caractere de porcentagem (%) pode ser usado em qualquer lugar de um id ou classe, evitando que seu próprio conjunto de regras seja renderizado em 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

O sinalizador! Opcional é usado para permitir que @extend não crie nenhum novo seletor.

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

@extend in Directives

Se @extend for usado dentro da @media então ele pode estender os seletores apenas que estão presentes nos mesmos blocos de diretivas.

 
@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;
   }
}

Exemplo

O exemplo a seguir demonstra o uso de @extend no arquivo SCSS -

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

Em seguida, crie o arquivo extend.scss .

extend.scss

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

h2{
   color: #787878;
   @extend .style

}

.container{
   @extend h2
}

Você pode dizer ao SASS para observar o arquivo e atualizar o CSS sempre que o arquivo SASS for alterado, usando o seguinte comando -

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

A seguir, execute o comando acima; ele criará o arquivo extend.css automaticamente com o seguinte código -

extend.css

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

h2, .container {
   color: #787878;
}

Resultado

Vamos realizar as seguintes etapas para ver como funciona o código fornecido acima -

  • Salve o código html fornecido acima em extend.html Arquivo.

  • Abra este arquivo HTML em um navegador, uma saída é exibida conforme mostrado abaixo.