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

Posted 2023-03-06

【中文标题】SASS - 它的父母和另一个父母的孩子的嵌套孩子

【英文标题】：SASS - Nest child of both it's parent and another of it's parent's children

【发布时间】：2018-01-15 00:19:54

【问题描述】：

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

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

.grid
  ...

    .nested
      ...

        .columns
          ...
        
    

    .columns
      ...
    

【问题讨论】：

.grid, .nested ??设置公共属性

是的，如果没有任何特定于 sass 的东西，那将是我的目标解决方案。 （我想我想多了，忽略了奥卡姆剃刀）

【参考方案1】：

只需使用外面的.nested。

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

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

.grid
    ...
    .nested
        ...
    
    &, .nested 
        .columns
            ...
        
    

【参考方案2】：

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