遍历树的 Sass 模式

Question

我有以下 SASS 结构

 .entry {
        //some styles here 
        .banner {
            border:4px solid red;
                .position {
                    display: inline-block;
                }
        }
    }

在html中

<div class="entry">
    <div class="banner>
        <div class="position"></div>
    </div>
</div>

现在我想在条目中添加一个额外的类时更改 .banner 和 .position 的样式。

<div class="entry team1">
        <div class="banner>
            <div class="position"></div>
        </div>
</div>

这是我多次遇到的问题，但从未找到一种干净的方法来解决，& 运算符或 @extend 可以是选项，但理想情况下，我想将所有具有相同类的样式分组。

任何关于如何尽可能高效地编写此模式的建议将不胜感激？

Answer 1

好吧，我会建议这样的事情：

.entry {
    .banner { /* defaults */ }


    &.team1 {
        .banner { 
            /* changes */ 
            .position { /*changes */}
        }
    }

}

据我所知，在 css 中“遍历树”是不可能的，所以在 css 中也不会。

我想到的另一件事是 @at-root 将规则移动到生成的 CSS 的根目录。但总而言之，这将导致一个 »global« 类定义，所以我想这不是你想要的。