使用嵌套Sass树中的其他类引用顶级选择器
我使用了多年,最近来到了scss。在那个里,基于顶层父元素的附加类向任何嵌套元素添加特定属性是一种很好的方法使用嵌套Sass树中的其他类引用顶级选择器,sass,Sass,我使用了多年,最近来到了scss。在那个里,基于顶层父元素的附加类向任何嵌套元素添加特定属性是一种很好的方法 <div class="someDivClass"> <ul class="someULclass"> <li>Text lorem ipsum</li> <li>Text ipsum lorem <ul class="someULclass2">
<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>
现在如果我有
<div class="someDivClass additionalClass">
.....
</div>
这将给我这个输出
.additionalClass.someDivClass ul.someClass li ul.someULclass2 li {color: red;}
在SASS中是否有同样的方法?很抱歉,如果有文档记录,我能找到的只是引用直系家长,而不是顶级家长
或将问题极度简化……
为什么这不起作用
.topParent& {color: red;}
..?为了避免直接的父对象,您应该使用根目录下的
@at
指令(在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; }
.someDivClass {
ul.someULclass {
li {
ul.someULclass2 {
li {
@at-root .additionalClass#{&} {
color: red;
}
}
}
}
}
}
.additionalClass.someDivClass ul.someULclass li ul.someULclass2 li { color: red; }