在兄弟姐妹之间减少代码共享

Question

考虑以下DOM：

<div class="first">
    <div class="nested"></div>
</div>
<div class="second"></div>

我很少：

.first {
    margin: 19px;

    .nested{ color: white; }
 }

我也想将margin: 19px应用于.second。

如果.second div嵌套在.first：

中，则适用

.first {
    &, .second {
        margin: 19px;
    }

    .nested{ color: white; }
 }

是否可以在.first块中执行此操作，因此它适用于上述标记结构中的.second？

Answer 1

为什么要将.second放在.first内？

这里有三个变体：

1。＆＃34;永远不要为了嵌套而使用嵌套＆＃34;：

.first, .second {
    margin: 19px;
}

.first .nested {
    color: white;
}

2。＆＃34;我仍然想要嵌套，如果结果包含冗余选择器，我也不在乎＃34;：

.first, .second {
    margin: 19px;

    .nested {
        color: white;
    }
}

3。＆＃34;我不喜欢 1 或 2 而且我不在乎我的代码不太可读＆＃34;：

.first {
    margin: 19px;

    .nested {
        color: white;
    }
}

.second:extend(.first) {}

<强> ---

P.S。实际上，考虑更多，我个人会使用 4 变体：

HTML：

<div class="first">
    <div class="unique-class-name"></div>
</div>
<div class="second"></div>

减：

.first, .second {
    margin: 19px;
}

.unique-class-name {
    color: white;
}