SASS - 它的父母和另一个父母的孩子的嵌套孩子

【问题标题】：SASS - Nest child of both it's parent and another of it's parent's childrenSASS - 它的父母和另一个父母的孩子的嵌套孩子
【发布时间】：2018-01-15 00:19:54
【问题描述】：

我正在构建一个 flexbox 网格，并希望在它的直接父级（网格）和另一个父级子级（嵌套）中都有一个元素（列）作为子级。

我的问题：是否有一种 SASS 方法可以在保持干燥的同时完成此任务？当前的实现如下所示：

.grid{
  ...

    .nested{
      ...

        .columns{
          ...
        }
    }

    .columns{
      ...
    }
}

【问题讨论】：

.grid, .nested { ??设置公共属性
是的，如果没有任何特定于 sass 的东西，那将是我的目标解决方案。（我想我想多了，忽略了奥卡姆剃刀）

标签： css sass nested css-selectors flexbox

【解决方案1】：

只需使用外面的.nested。

它将编译为.grid .columns，这将适用于.grid内的所有.columns，包括.grid .nested内的所有.grid .nested。

但是，如果您出于某种原因也需要.grid .nested .columns，您可以这样做：

.grid{
    ...
    .nested{
        ...
    }
    &, .nested {
        .columns{
            ...
        }
    }
}

【讨论】：

【解决方案2】：

您可以先为.grid .column 设置样式，然后在nested 元素中为colums 添加必要的样式。因此你很干，因为它们会级联.grid .columns的样式

【讨论】：