Extinderi în lanț în @extend în SASS
Directiva @extend suportă de asemenea
extinderea în lanț (secvențială), adică
un selector poate fi extins de un alt selector,
care, la rândul său, este extins de un al treilea
selector. De exemplu:
Să considerăm un exemplu:
.warning {
border: 1px solid;
background-color: #ffd900;
}
.personalWarning {
@extend .warning;
border-width: 3px;
}
.systemWarning {
@extend .personalWarning;
position: center;
}
După cum vedem din rezultatul compilării,
toate elementele cu clasa .systemWarning
au de asemenea stilurile claselor .warning și
.personalWarning:
.warning, .personalWarning, .systemWarning {
border: 1px solid;
background-color: #ffd900;
}
.personalWarning, .systemWarning {
border-width: 3px;
}
.systemWarning {
position: center;
}
Spuneți care va fi rezultatul compilării următorului cod:
div {
font-size: 10px;
color: #181402;
}
.main-block {
@extend div;
border: 2px solid orange;
}
#warning-text {
@extend .main-block;
margin-top: 10px;
}
Spuneți care va fi rezultatul compilării următorului cod:
p {
padding: 10px;
}
.main-text {
font-weight: 800px;
}
.card {
@extend p;
color: #021338;
}
.product-card {
@extend .card, .main-text;
font-size: 12px;
}
Spuneți care va fi rezultatul compilării următorului cod:
p {
padding: 5px;
}
.main-text {
@extend p;
font-size: 14px;
}
.card {
@extend .main-text;
border: 1px solid black;
}
.product-card {
@extend .card;
background-color: #e1f1f1;
}