穿越树的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>

这是我遇到过很多次的问题，并且从来没有找到一个干净的方法去做，＆amp;运算符或@extend可以是选项，但理想情况下我想将所有具有相同类的样式分组。

有关如何尽可能高效地编写此模式的任何建议都会受到赞赏吗？

Answer 1

我会建议这样的事情：

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


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

}

据我所知，不可能»在css中遍历树«，所以它也不会在scss中。

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