定义CSS子根

问题描述

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

假设我有许多具有color属性的组件，并且我希望它们的颜色与--primary-color相同。通常我必须在根目录中定义它们的颜色，例如

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

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

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

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)
}

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

解决方法

来自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);
}