Ekstensi Berantai di @extend di SASS
Direktif @extend juga mendukung
ekstensi berantai (berurutan), yaitu
selektor dapat diperluas oleh selektor lain,
yang, pada gilirannya, diperluas oleh selektor
ketiga. Contohnya:
Pertimbangkan contoh berikut:
.warning {
border: 1px solid;
background-color: #ffd900;
}
.personalWarning {
@extend .warning;
border-width: 3px;
}
.systemWarning {
@extend .personalWarning;
position: center;
}
Seperti yang kita lihat dari hasil kompilasi,
semua elemen dengan kelas .systemWarning
juga memiliki gaya dari kelas .warning dan
.personalWarning:
.warning, .personalWarning, .systemWarning {
border: 1px solid;
background-color: #ffd900;
}
.personalWarning, .systemWarning {
border-width: 3px;
}
.systemWarning {
position: center;
}
Jelaskan, bagaimana hasil kompilasi dari kode berikut:
div {
font-size: 10px;
color: #181402;
}
.main-block {
@extend div;
border: 2px solid orange;
}
#warning-text {
@extend .main-block;
margin-top: 10px;
}
Jelaskan, bagaimana hasil kompilasi dari kode berikut:
p {
padding: 10px;
}
.main-text {
font-weight: 800px;
}
.card {
@extend p;
color: #021338;
}
.product-card {
@extend .card, .main-text;
font-size: 12px;
}
Jelaskan, bagaimana hasil kompilasi dari kode berikut:
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;
}