Moștenirea selectorilor în SASS
În timpul lucrului cu stilurile pot apărea probleme
la moștenire. Cu toate acestea, cu ajutorul
directivei @extend este ușor să le eviți,
deoarece ea indică clar ce
selector ar trebui să moștenească stilurile altuia.
Să analizăm un exemplu:
Să analizăm un exemplu:
.warning {
border: 1px solid;
background-color: #ffd900;
}
.personalWarning {
@extend .warning;
border-width: 3px;
}
Acum să ne uităm la rezultatul compilării:
.warning, .personalWarning {
border: 1px solid;
background-color: #ffd900; }
.personalWarning {
border-width: 3px;
}
Spuneți, care va fi rezultatul compilării următorului cod:
#product-card {
color: #302f2f;
font-family: 'Times New Roman', Times, serif;
}
#product-card-title {
@extend #product-card;
font-weight: 600px;
}
Modificați condițiile sarcinii precedente, astfel încât
#product-card să moștenească de la
#product lățimea, egală cu
500px.
