如何在项目的全局设置中使用自定义属性的CSS变量选项

我一直在想一些关于如何在项目的全局设置中使用自定义属性（又称 CSS 变量）的想法。之所以有这个想法是要为设计师/开发人员提供跨多个组件的一致样式的控制。

如何实现这一想法？

使用 Sass，很容易：

推荐阅读：《[Sass 进阶]Sass 的控制命令》

// 全局选项
$enable-shadows: false;

// 定义一个 Mixins 模块
@mixin box-shadow($shadow...) {
  @if $enable-shadows {
    box-shadow: $shadow;
  }
}

// 使用
.component {
  @include box-shadow(0 .5rem 1rem rgba(0,0,0,.1));
}

默认情况下，除非将$enable shadows 更改为 true，否则 box-shadow 不会包含在编译的 CSS 中。

对于自定义属性，由于后备值的原因，逻辑非常相似。如果存在全局--enable shadows选项，则该选项将优先于后备值。若要启用.component的box-shadow，注释或删除--enable-shadows。

代码如下：

:root {
  --enable-shadows: none;
}
.component {
  box-shadow: var(--enable-shadows, 0 .5rem 1rem rgba(0,0,0,.1));
}

当然还可以通过指定全局阴影变量并使用实用程序或修饰符类在组件级别覆盖该变量，接下来以另一种方式进行处理。

代码如下：

// 全局选项
:root {
  --component-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
}

// 使用
.component {
  box-shadow: var(--component-shadow);
}
.remove-shadow {
  // 因为自定义属性在此规则集中，它只会移除这个类的阴影
  --component-shadow: none;
}

这样一来，我们就可以对 CSS 中的全局选项进行一些基本控制，而无需预处理器。