css - CSS 自定义属性是否可以包含多个要引用的值？

Question

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

.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 自定义属性来完成此操作，例如“变量(--阴影)”？如果不是 CSS 自定义属性，我可以使用什么？我必须不惜一切代价避免使用 JS 和类似的东西，因为我在不允许访问/使用 JS 等的沙盒环境中工作。它只是 Bootstrap 和 SCSS。

Answer 1

SASS (SCSS) 的“扩展”功能可以帮助您。

只是使用

@extend .shaded

你想要的地方。

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

下面的链接也对你有帮助

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