La directive !optional dans @extend en SASS
Lors de l'extension d'un sélecteur, il est possible de rencontrer
une erreur lorsque la directive @extend
ne fonctionne pas correctement. Par exemple,
si vous avez le code suivant :
a.info {
@extend .main;
}
Si aucun sélecteur ne contient .main,
une erreur se produira lors de la compilation.
Dans ce cas, nous devons fusionner
les séquences de sélecteurs,
pour quoi nous utilisons la directive @extend.
De plus, une erreur se produira si le sélecteur
contenant .main est comme ceci :
h1.main, ce qui s'explique par un conflit
entre a et h1.
Par conséquent, si nécessaire, vous pouvez
autoriser la directive @extend à ne pas créer
de nouveaux sélecteurs en utilisant la directive d'optionalité
!optional, écrite après le sélecteur. Par exemple :
a.info {
@extend .main !optional;
}
