Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Estendendo Estilos com a Diretriz @extend | Pré-Processadores CSS e Sass
Técnicas Avançadas de CSS

bookEstendendo Estilos com a Diretriz @extend

O quarto recurso útil permite aplicar propriedades CSS predefinidas de um elemento a outro, criando uma relação entre seletores. Isso significa que um seletor pode herdar as propriedades de outro seletor.

Agora, observe a imagem abaixo, que mostra dois elementos de botão:

Temos dois botões: "send" e "submit". A única diferença entre esses elementos é o valor da propriedade background-color. Portanto, podemos definir os estilos para o botão "send" e fazer com que o botão "submit" herde esses estilos.

O código html é:

<button class="send-button">send</button>
<button class="submit-button">submit</button>

Veja como podemos herdar estilos com a ajuda do sass.

.send-button {
  padding: 10px 20px;
  border: 2px solid #4f5e77;
  border-radius: 10px;
  color: white;
  background-color: #ff8a00;
}

.submit-button {
  @extend .send-button;
   background-color: #9bbaee;
}

O seletor .submit-button herda todos os estilos do seletor .send-button usando a diretiva @extend.

question mark

O que o @extend faz no Sass?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 7. Capítulo 6

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Suggested prompts:

Can you explain how the @extend directive works in more detail?

Are there any limitations or drawbacks to using @extend in Sass?

Can you show an example of how to override other properties besides background-color?

Awesome!

Completion rate improved to 2.04

bookEstendendo Estilos com a Diretriz @extend

Deslize para mostrar o menu

O quarto recurso útil permite aplicar propriedades CSS predefinidas de um elemento a outro, criando uma relação entre seletores. Isso significa que um seletor pode herdar as propriedades de outro seletor.

Agora, observe a imagem abaixo, que mostra dois elementos de botão:

Temos dois botões: "send" e "submit". A única diferença entre esses elementos é o valor da propriedade background-color. Portanto, podemos definir os estilos para o botão "send" e fazer com que o botão "submit" herde esses estilos.

O código html é:

<button class="send-button">send</button>
<button class="submit-button">submit</button>

Veja como podemos herdar estilos com a ajuda do sass.

.send-button {
  padding: 10px 20px;
  border: 2px solid #4f5e77;
  border-radius: 10px;
  color: white;
  background-color: #ff8a00;
}

.submit-button {
  @extend .send-button;
   background-color: #9bbaee;
}

O seletor .submit-button herda todos os estilos do seletor .send-button usando a diretiva @extend.

question mark

O que o @extend faz no Sass?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 7. Capítulo 6
some-alt