Upanuzi wa Mnyororo katika @extend kwenye SASS
Derectiva @extend pia inasaidia
upanuzi wa mnyororo (ufuatanisho), yaani
kichaguli kinaweza kupanuliwa na kichaguli kingine,
ambacho, kwa upande wake, kinapanuliwa na kichaguli
cha tatu. Kwa mfano:
Tuchunguze mfano:
.warning {
border: 1px solid;
background-color: #ffd900;
}
.personalWarning {
@extend .warning;
border-width: 3px;
}
.systemWarning {
@extend .personalWarning;
position: center;
}
Kama tunavyoona kutoka kwa matokeo ya ukusanyaji
vipengele vyote vilivyo na darasa .systemWarning
vina pia mitindo ya madarasa .warning na
.personalWarning:
.warning, .personalWarning, .systemWarning {
border: 1px solid;
background-color: #ffd900;
}
.personalWarning, .systemWarning {
border-width: 3px;
}
.systemWarning {
position: center;
}
Eleza, matokeo ya ukusanyaji ya mfuatano ufuatao wa code yatakuwa yapi:
div {
font-size: 10px;
color: #181402;
}
.main-block {
@extend div;
border: 2px solid orange;
}
#warning-text {
@extend .main-block;
margin-top: 10px;
}
Eleza, matokeo ya ukusanyaji ya mfuatano ufuatao wa code yatakuwa yapi:
p {
padding: 10px;
}
.main-text {
font-weight: 800px;
}
.card {
@extend p;
color: #021338;
}
.product-card {
@extend .card, .main-text;
font-size: 12px;
}
Eleza, matokeo ya ukusanyaji ya mfuatano ufuatao wa code yatakuwa yapi:
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;
}