定义CSS子根

假设在my:root中有一个

--primary color

变量

假设我有几十个具有颜色属性的组件，我希望它们的颜色与

--原色

相同。通常我必须在根中定义它们的颜色，例如

：根目录{
--原色：红色；
--日历边框颜色：var（--主颜色）；
} 

对于少量的简单组件来说，这很好，但是如果我有几十个组件，所有这些组件都有几个依赖于根变量的属性，那会怎么样呢？我不希望根目录有数百行长，并且很难导航到需要更改的单组件属性

对我来说更有意义的是，有一个calendar.css文件，并定义一个subroot/constructor/无论我在哪里获取根变量，然后可以为该类定义我自己的变量，例如

calendar.css
：次根{
--日历边框颜色：var（--主颜色）；
--日历突出显示颜色：var（--次颜色）；
--日历重要颜色：var（--第三种颜色）；
--日历默认颜色：var（--默认颜色）；
}
.日历边框{
颜色：var（--日历边框颜色）；
高度：20px；
//等等。。。

从那里我可以改变一个文件，我知道所有的东西都在哪里

我想这样的事情是存在的，对吧

编辑：

似乎在大部分情况下都能正常工作，但不是一直都能正常工作。最初，我是在组件主div的类名中调用.calendar的：

.calendar{
--日历背景色：红色；
背景色：var（--日历背景色）
}

所以我移动了它并将div类名重命名为“calendar main”：

.calendar{
--日历背景色：红色；
}
.主日历{
背景色：var（--日历背景色）
}

这似乎对某些属性有效，但对其他属性无效。知道发生了什么吗？

来自

声明自定义属性时，使用以双连字符（

--

）开头的自定义属性名称和可以是任何有效CSS值的属性值。与任何其他属性一样，这是写在规则集中的，如下所示：

element {
  --main-bg-color: brown;
}

请注意，给定给规则集的选择器定义了自定义属性可以在其中使用的范围

基于此，我们可以使用任何选择器来代替

：root

或（在引用的示例中）

元素

，并且规则集中定义的属性将限定在该选择器的范围内

在不了解组件的HTML结构的情况下，很难说这是否会很可靠地工作，但可以说日历组件的结构如下：

选择月份
选择年份
s
M
T
W
T
F
s
…天。。。

然后，您可以这样构造变量：

.calendar{
--日历边框：#000；
--日历工作日字体重量：粗体；
--日历日字体重量：正常；
--日历日今日字体重量：粗体；
--所选日历日字体大小：粗体；
}
.日历日{
字体重量：var（--日历工作日字体重量）；
}
.日历td{
字体重量：var（--日历日字体重量）；
}
.日历td已选定{
字体重量：var（--日历日选择的字体重量）；
}
.今天{
字体重量：var（--日历日当前字体重量）；
}

使用body选择器作为子根，它将完成此任务没有“子根”，只有元素，因此选择一个元素作为“根”对于您正在定义的变量，并在那里定义它们。它们将可用于级联中较低的所有元素。@TemaniAfif main.css中的主体选择器？这将挫败我的尝试，不是吗？@Hereticsmonkey我知道没有这样的事情，但我认为这看起来像是一个相对常见的问题，可能已经发生过前面提到过。我不确定你选择根元素是什么意思。它不会，根元素等同于

html

元素，因此

body

是一个完美的子根元素。我在我的编辑中提到了你的回答（注释不允许新行）。这个问题是如何创建“子根”，我认为我的帖子至少根据规范回答了这个问题。如果浏览器中的实现行为有问题，我认为这会上升到一个新问题的水平，否则答案会变得很难回答。