使用嵌套 Sass 树中的附加类引用顶级选择器

Question

我使用cssrush已经很多年了，最近开始使用 css。这是一种基于顶级父元素的附加类向任何嵌套元素添加特定属性的好方法。

<div class="someDivClass">
    <ul class="someULclass">
        <li>Text lorem ipsum</li>
        <li>Text ipsum lorem
            <ul class="someULclass2">
                <li>Text lorem ipsum</li>
                <li>Text ipsum lorem</li>
            </ul>   
        </li> 
    </ul>
</div>

CSS 会是这样的......

.someDivClass {
    ul.someClass {
        fewUlporpertis: values;
        li {
          fewLIporpertis: values;
          ul.someULclass2 {
              fewUlporpertis: values;
              li {
                  fewLIporpertis: values;
              }
          }
        }
    }
}

现在如果我有...

<div class="someDivClass additionalClass">
    .....
</div>

我可以做这个...

.someDivClass {
    ul.someClass {
        fewUlporpertis: values;
        li {
          fewLIporpertis: values;
          ul.someULclass2 {
              fewUlporpertis: values;
              li {
                  fewLIporpertis: values;
                  .additionalClass& {
                      color: red;
                  }
              }
          }
        }
    }
}

这会给我这个输出......

.additionalClass.someDivClass ul.someClass li ul.someULclass2 li {color: red;}

有没有办法在 SASS 中做同样的事情？抱歉，如果有记录，我能找到的只是引用直系父级，而不是顶级父级。

或者将问题超级简化......

为什么这不起作用..

.topParent& {color: red;}

..？

Answer 1

为了避免定位直接父级，您应该使用指令@at-root（在 Sass 3.3 中引入）遍历回文档的根：

.someDivClass {
    ul.someULclass {
        li {
            ul.someULclass2 {
                li {
                    @at-root .additionalClass#{&} {
                        color: red;
                    }
                }
            }
        }
    }
}

这将输出到：

.additionalClass.someDivClass ul.someULclass li ul.someULclass2 li { color: red; }

查看演示