Estendendo 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.
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
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.04Estendendo 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.
Obrigado pelo seu feedback!
