Question

目前，我正在寻找关于萨斯的最佳方式..所以这就是问题，我正在寻找的结构是：

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

          }
    }
}

最好的方法是什么？我不想用！重要的。非常感谢您的建议。

干杯，

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

Sass：@Extend Sibling（第3级）没有以前的兄弟姐妹（第2名）

1 个答案: