使用带有 SASS & 符号的 CSS 前缀选择器答案

【问题标题】：Using CSS prefix selector with SASS ampersand使用带有 SASS & 符号的 CSS 前缀选择器
【发布时间】：2019-03-21 00:00:17
【问题描述】：

在 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 上做错了什么？

谢谢！

【问题讨论】：

标签： css sass

【解决方案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 以保持可读性和可维护性。

【讨论】：