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不支持类连接是否有特定原因。假设当父选择器具有带有＆的嵌套类时，可以假设选择器中使用的前缀可以用于串联是否安全？还是我的混蛋做错了什么？

谢谢！

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才能保持可读性和可维护性。

将CSS前缀选择器与SASS＆符一起使用

1 个答案: