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

Question

假设我想创建一系列 class 选择器值，可以重复使用多次。

.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 和类似的东西，因为我在不允许 access/use 的 JS 等沙盒环境中工作。它只是 Bootstrap 和 SCSS。

Answer 1

SASS (SCSS) 的 "extend" 能力可以帮助你。

只需使用

@extend .shaded

你想要的地方。

您应该将 CSS 代码写入 .scss 格式的文件中。

下面的 link 也对您有帮助

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

Answer 2

假设您有 .shaded 选择器。

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

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

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