CSS自定义属性可以包含多个要引用的值吗？

2024-05-20 • 问答

比方说，我想创建一系列可以多次重用的类选择器值。

.shaded {
   background: black;
   color: grey;
}

然后我想在CSS内的其他地方使用这两个选择器值。

.box1 {
   width: 100px;
   height: 100px;
}
.box2 {
   width: 75px;
   height: 75px;
}
.box3 {
   width: 50px;
   height: 50px;
}

我希望box1，box2和box3具有.shaded的值。我不想输入

background: black;
color: grey;

分别针对box1，box2和box3。有没有一种方法可以使用CSS自定义属性来完成此操作，例如“ var（-shaded）”？如果不是CSS自定义属性，我可以使用什么？我必须不惜一切代价避免使用JS和类似的东西，因为我正在一个不允许访问/使用JS等的沙盒环境中工作。这仅仅是Bootstrap和SCSS。

SASS（SCSS）的“扩展”功能可以帮助您。

只需使用

@extend .shaded

您想要的地方。

您应该以.scss格式的文件编写CSS代码。

下面的链接也可以帮助您

https://sass-lang.com/documentation/at-rules/extend

假设您具有.shaded选择器。

.shaded {
    background: black;
    color: grey;
}

在Sass中，您可以将任何类定义导入到另一个选择器，如下所示

.box1 {
    @extend .shaded;
    width: 100px;
    height: 100px;
}
.box2 {
    @extend .shaded;
    width: 75px;
    height: 75px;
}
.box3 {
    @extend .shaded;
    width: 50px;
    height: 50px;
}
```

CSS自定义属性可以包含多个要引用的值吗？

bingjie000407 回答：CSS自定义属性可以包含多个要引用的值吗？

大家都在问