Question

我使用css crush多年，最近才开始施行。在那里，根据顶级父元素的附加类，将特定属性添加到任何嵌套元素是一种很好的方法。

<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

在嵌套Sass树中引用顶级选择器和附加类

1 个答案: