: extend () in nested block
This code:
.first {
margin: 19px;
.nested {
color: white;
}
}
.second:extend(.first) {
}
outputs:
.first,
.second {
margin: 19px;
}
.first .nested {
color: white;
}
But if you wrap it in another block:
div {
.first {
margin: 19px;
.nested {
color: white;
}
}
.second:extend(.first) {
}
}
Outputs:
div .first {
margin: 19px;
}
div .first .nested {
color: white;
}
are extensions ignored? This is mistake?
+3
source to share
1 answer
From the comment above @ seven-phase-max
No, this is not a mistake. :extend
does not apply to the selector with which it is used; it always requires the full ("absolute") path selector. That is, it should be .second:extend(div .first)
no matter where it is .second
.
div {
.first {
margin: 19px;
.nested {
color: white;
}
}
.second:extend(div .first) {}
}
+4
source to share