定义 CSS 子根

Question

假设我的 :root 中有一个 --primary-color 变量。

假设我有几十个具有颜色属性的组件，我希望它们的颜色与--primary-color 相同。通常我必须在根中定义它们的颜色，例如

:root{
  --primary-color: red;
  --calendar-border-color: var(--primary-color);
} 

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

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

calendar.css

:sub-root{
  --calendar-border-color:    var(--primary-color);
  --calendar-highlight-color: var(--secondary-color);
  --calendar-important-color: var(--third-color);
  --calendar-default-color:   var(--default-color);

}

.calendar-border{
  color: var(--calendar-border-color);
  height: 20px;
 //etc...

然后我可以从那里更改一个我知道所有内容的文件。

我想存在这样的东西，对吧？

编辑：

似乎大部分都有效，但并非一直有效。最初，我在组件的主 div 上的类名中调用 .calendar：

.calendar {
  --calendar-background-color: red;
  background-color: var(--calendar-background-color)
}

所以我移动它并将 div 类名重命名为 'calendar-main'：

.calendar{
  --calendar-background-color: red;
}

.calendar-main{
  background-color: var(--calendar-background-color)
}

这似乎适用于某些属性，但不适用于其他属性。知道发生了什么吗？

Answer 1

来自MDN's documentation on Using CSS custom properties:

使用以双连字符 (--) 开头的自定义属性名称和可以是任何有效 CSS 值的属性值来声明自定义属性。像任何其他属性一样，这写在规则集中，如下所示：

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

请注意，为规则集提供的选择器定义了自定义属性可以使用的范围。

基于此，我们可以使用任何选择器代替:root 或（在引用的示例中）element，并且规则集中定义的属性将作用于该选择器。

在不知道组件的 HTML 结构的情况下，很难说这是否会很有信心，但可以说您的日历组件具有这样的结构：

<div class="calendar">
  <select class="month"><option>Select month</option></select>
  <select class="year"><option>Select year</option></select>
  <table>
    <thead>
      <tr>
        <th>S</th>
        <th>M</th>
        <th>T</th>
        <th>W</th>
        <th>T</th>
        <th>F</th>
        <th>S</th>
      </tr>
    </thead>
    <tbody>
     ...days...
    </tbody>
  </table>
</div>

然后你可以像这样构造你的变量：

.calendar {
  --calendar-border: #000;
  --calendar-weekday-font-weight: bold;
  --calendar-day-font-weight: normal;
  --calendar-day-today-font-weight: bold;
  --calendar-day-selected-font-weight: bold;
}

.calendar th {
  font-weight: var(--calendar-weekday-font-weight);
}
.calendar td {
  font-weight: var(--calendar-day-font-weight);
}
.calendar td.selected {
  font-weight: var(--calendar-day-selected-font-weight);
}
.calendar td.today {
  font-weight: var(--calendar-day-today-font-weight);
}