定义 CSS 个子根

Question

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

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

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

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

对我来说更有意义的是，有一个 calendar.css 文件，并定义一个 subroot/constructor/whatever ，我只在其中获取根变量，然后可以为它定义我自己的变量 class，例如

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 上以 class 名称调用 .calendar：

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

所以我移动了它并将 div class 名称重命名为 '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:

Declaring a custom property is done using a custom property name that begins with a double hyphen (--), and a property value that can be any valid CSS value. Like any other property, this is written inside a ruleset, like so:
element {
  --main-bg-color: brown;
}
Note that the selector given to the ruleset defines the scope that the custom property can be used in.

基于此，我们可以使用任何选择器代替 :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);
}

定义 CSS 个子根

Defining CSS sub-roots

css

css-variables