Selektorarv i SASS
Ved arbejde med stiler kan der opstå problemer
med arv. Men med hjælp fra
directivet @extend er det let at undgå dem,
da det præcist angiver, hvilken
selektor der skal arve stiler fra en anden.
Lad os overveje et eksempel:
Lad os overveje et eksempel:
.warning {
border: 1px solid;
background-color: #ffd900;
}
.personalWarning {
@extend .warning;
border-width: 3px;
}
Lad os nu se på resultatet af kompileringen:
.warning, .personalWarning {
border: 1px solid;
background-color: #ffd900; }
.personalWarning {
border-width: 3px;
}
Forklar, hvad resultatet af kompileringen af følgende kode vil være:
#product-card {
color: #302f2f;
font-family: 'Times New Roman', Times, serif;
}
#product-card-title {
@extend #product-card;
font-weight: 600px;
}
Ændr betingelserne for den forrige opgave, så
#product-card arver fra
#product en bredde på
500px.
