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

Question

我正在使用 css crush多年来，最近来到scss。这是一种基于顶级父元素的附加类向任何嵌套元素添加特定属性的好方法。

<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; }

See Demo