css - 将 CSS 前缀选择器与 SASS 符号一起使用

Question

在 sass 中我们可以用这个做一些类名连接:

//Sass
.button{
    &-1{ background-color: red; }
    &-2{ background-color: blue; }
}

//Result
.button-1{ background-color: red; }
.button-2{ background-color: blue; }

我能否以某种方式在前缀选择器之上进行连接，这样我就不必使用基类或@extend:

*[class^="button-"]{
    width: 20px;
    height: 20px;
    border: 1px solid black;

    &-1{
        background-color: red;
    }
    &-2{
        background-color: blue;
    }
}

我可以通过定义一个基类然后在之后添加特定样式来实现相同的结果，如下所示:

.base-button{
    width: 20px;
    height: 20px;
    border: 1px solid black;
}

.button{
    &-1{ background-color: red; }
    &-2{ background-color: blue; }
}

但是我必须去把那个基类添加到所有元素。另一种方法是像这样使用 @extend 指令:

.button{
    width: 20px;
    height: 20px;
    border: 1px solid black;
}

.button-{
    &1{
        @extend .button;
        background-color: red;
    }
    &2{
        @extend .button;
        background-color-blue;
    }
}

我想我的问题是当父选择器是类前缀选择器时，sass 不支持类连接是否有特殊原因。当父选择器具有带 & 的嵌套类时，假设选择器中使用的前缀可用于串联是否安全？还是我的 sass 有问题？

谢谢!

Answer 1

当您使用 & 时，SASS 会进行客观的文字串联，因此:

*[class^="button-"]{
    width: 20px;
    height: 20px;
    border: 1px solid black;

    &-1{
        background-color: red;
    }
    &-2{
        background-color: blue;
    }
}

将生成:

*[class^="button-"]{
    width: 20px;
    height: 20px;
    border: 1px solid black;
}
*[class^="button-"]-1{
    background-color: red;
}
*[class^="button-"]-2{
    background-color: blue;
}

语法无效，因为选择器如 *[class^="button-"]-1 不是有效的 CSS。

您可以 create a mixin to get what you want .但坦率地说，这些解决方案应该是万不得已的最后手段，例如通过类名或 id 以外的属性选择器。即便如此，只需 KISS 即可保持可读性和可维护性。