css - Sass: @Extend Sibling (3rd level) 没有之前的 Sibling (2nd) 名字

Question

目前，我正在寻找 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。非常感谢您的建议。

干杯，

Answer 1

使用 @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; }

Documentation