Extension des Styles avec la Directive @extend
La quatrième fonctionnalité utile permet d'appliquer des propriétés CSS prédéfinies d'un élément à un autre, créant ainsi une relation entre les sélecteurs. Cela signifie qu'un sélecteur peut hériter des propriétés d'un autre sélecteur.
Observons maintenant l'image ci-dessous, qui présente deux éléments de bouton :
Nous avons deux boutons : « send » et « submit ». La seule différence entre ces éléments réside dans la valeur de la propriété background-color. Par conséquent, nous pouvons définir les styles pour le bouton « send » et faire en sorte que le bouton « submit » hérite de ces styles.
Le code html est :
<button class="send-button">send</button>
<button class="submit-button">submit</button>
Voyons comment nous pouvons hériter des styles à l'aide de 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;
}
Le sélecteur .submit-button hérite de tous les styles du sélecteur .send-button en utilisant la directive @extend.
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
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.04Extension des Styles avec la Directive @extend
Glissez pour afficher le menu
La quatrième fonctionnalité utile permet d'appliquer des propriétés CSS prédéfinies d'un élément à un autre, créant ainsi une relation entre les sélecteurs. Cela signifie qu'un sélecteur peut hériter des propriétés d'un autre sélecteur.
Observons maintenant l'image ci-dessous, qui présente deux éléments de bouton :
Nous avons deux boutons : « send » et « submit ». La seule différence entre ces éléments réside dans la valeur de la propriété background-color. Par conséquent, nous pouvons définir les styles pour le bouton « send » et faire en sorte que le bouton « submit » hérite de ces styles.
Le code html est :
<button class="send-button">send</button>
<button class="submit-button">submit</button>
Voyons comment nous pouvons hériter des styles à l'aide de 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;
}
Le sélecteur .submit-button hérite de tous les styles du sélecteur .send-button en utilisant la directive @extend.
Merci pour vos commentaires !
