css - :extend() in nested block

Question

这段代码:

.first {
    margin: 19px;

    .nested {
        color: white;
    }
}

.second:extend(.first) {
}

输出:

.first,
.second {
  margin: 19px;
}
.first .nested {
  color: white;
}

但是如果你把它包装在另一个 block 中:

div {
    .first {
        margin: 19px;

        .nested {
            color: white;
        }
    }

    .second:extend(.first) {
    }
}

输出:

div .first {
  margin: 19px;
}
div .first .nested {
  color: white;
}

无视延伸？这是错误吗？

Answer 1

来自comment以上 @seven-phases-max

不，这不是错误。 :extend 与它一起使用的选择器无关；它总是需要一个完整的(“绝对”)选择器“路径”。 IE。它应该是 .second:extend(div .first) 无论 .second 本身位于何处。

div {
    .first {
        margin: 19px;

        .nested {
            color: white;
        }
    }
    .second:extend(div .first) {}
}