Sass: @Extend Sibling (3rd level) 没有之前的 Sibling (2nd) 名字
Sass: @Extend Sibling (3rd level) without previous Sibling (2nd) name
目前,我正在寻找关于 Sass 的最佳方法。所以这就是问题所在,我正在寻找的结构是:
.block-color-default, .block-color-default--inner{
...........
}
.block-color-default--inner{
.........
}
但是我从我的代码中得到的一个坏结果是:
.block-color-default, .block-color .block-color-default--inner{
...........
}
.block-color-default--inner{
......... << -- (cannot override the css above)
}
这是我的代码:
.block{
&-color{
width: 100%;
height: 500px;
display:block;
background-color: #ccc;
&-default, %third{
width:100px;
height:50px;
background-color:#fff;
&--inner{
@extend %third;
background-color: #000;
}
}
}
}
解决此问题的最佳方法是什么?我不想使用 !important。
非常感谢您的建议。
干杯,
使用 @at-root
指令删除编译后的所有父项 CSS:
.block{
&-color{
width: 100%;
height: 500px;
display:block;
background-color: #ccc;
@at-root &-default, %third{
width:100px;
height:50px;
background-color:#fff;
&--inner{
@extend %third;
background-color: #000;
}
}
}
}
生成 CSS:
.block-color { width: 100%; height: 500px; display: block; background-color: #ccc; }
.block-color-default, .block-color-default--inner { width: 100px; height: 50px; background-color: #fff; }
.block-color-default--inner { background-color: #000; }
目前,我正在寻找关于 Sass 的最佳方法。所以这就是问题所在,我正在寻找的结构是:
.block-color-default, .block-color-default--inner{
...........
}
.block-color-default--inner{
.........
}
但是我从我的代码中得到的一个坏结果是:
.block-color-default, .block-color .block-color-default--inner{
...........
}
.block-color-default--inner{
......... << -- (cannot override the css above)
}
这是我的代码:
.block{
&-color{
width: 100%;
height: 500px;
display:block;
background-color: #ccc;
&-default, %third{
width:100px;
height:50px;
background-color:#fff;
&--inner{
@extend %third;
background-color: #000;
}
}
}
}
解决此问题的最佳方法是什么?我不想使用 !important。 非常感谢您的建议。
干杯,
使用 @at-root
指令删除编译后的所有父项 CSS:
.block{
&-color{
width: 100%;
height: 500px;
display:block;
background-color: #ccc;
@at-root &-default, %third{
width:100px;
height:50px;
background-color:#fff;
&--inner{
@extend %third;
background-color: #000;
}
}
}
}
生成 CSS:
.block-color { width: 100%; height: 500px; display: block; background-color: #ccc; }
.block-color-default, .block-color-default--inner { width: 100px; height: 50px; background-color: #fff; }
.block-color-default--inner { background-color: #000; }