纯 CSS 中的 CSS 变量 - 5 分钟或更短时间开始

纯 CSS 中的 CSS 变量（或正式名称：自定义属性）对于愿意花 5 分钟时间学习如何使用它们的人来说是一个巨大的节省时间。 它们从 CSS3 开始就已经存在，并且 92% 的用户拥有支持它们的浏览器。 使用 CSS 变量不需要对现有样式表或新工具进行任何重大更改，并且可以轻松应用于旧项目。 无需在文件中的数百个地方写下十六进制颜色代码，您可以只在一个地方定义它 - 使用 CSS 变量。 节省大量时间并有助于使样式表更加一致。

等等，所以这是 Saas 或更少，对吧？

不，我们在这里讨论的是纯 CSS，而不是 CSS 加上 Saas、Less 或 SCSS 等预处理器。 使用 CSS 变量不需要任何额外的工具、编辑器或对您的工作流程或您使用的任何其他内容进行更改。 因此，没有变量的现有 CSS 文件不需要任何“特殊”更改，并且您可以混合和匹配 - 仅将变量用于文件的一部分，或者仅在某些文件中是您的项目。

像 Saas 或 Less 这样的 CSS 预处理器也支持变量。 此外，它们还有更多您可以使用的功能和选项。 然而，顾名思义，它们需要一个预处理器——一种将用 Saas 编写的 CSS 转换为纯 CSS 的工具。 如果你只需要变量——纯 CSS 有你需要的一切。

CSS 变量是一个原生函数，这就是它们的伟大之处。 只需最少的努力，您的样式表就更具可读性和一致性。 此外，您以后必须进行的任何更改都更容易进行 -当您需要在数百个位置更改颜色代码时，肯定比搜索和替换更快。

让我们创建一些变量

与任何编程语言一样，使用变量有两个步骤：赋予它们值（定义它们）和使用它们（将它们放在需要该值的所有地方）。 我们也会这样做；

:root {
  --my-red: #ff0080;
  --my-shadow: 3px 3px 10px green;
  --my-border: 1px solid #222222;
}

.custom-box {
  box-shadow: var(--my-shadow);
}

.custom-text {
  color: var(--my-red);
  border: var(--my-border);
}

如果你想在 CSS 文件中全局（任何地方）使用一个变量，你必须在:root伪类中定义它。 文件中的位置无关紧要。 它可以在文件的开头或结尾。 但是，您必须将变量放入:root中。 名称必须以双破折号开头--并且不能包含任何空格。 CSS 变量可以保存您通常分配给 CSS 属性的任何值； 从颜色等简单值到背景或阴影等速记属性的复杂表达式。

要使用变量（获取其值），请将其放在var()函数中。 不要忘记所有变量名都以--开头。 这就是您开始时需要知道的一切。

使用后备值

如果未定义变量，则可以将后备值作为第二个参数提供给var()函数。

:root {
  --my-red: #ff0080;
  --my-blue: #0020ff;
  --my-shadow: 3px 3px 10px green;
}

.custom-box {
  box-shadow: var(--my-shadow, 2px 2px 5px blue);
}

.custom-text {
  color: var(--my-red, var(--my-blue, red));
}

如果属性值是一个复杂的值，请不要担心。 fallback 参数允许使用逗号（参见box-shadow示例）。 它还允许链接多个var()函数，如.custom-text中的颜色所示。 如果--my-red和--my-blue变量未定义，则红色将用作颜色。

结合var()和calc()也可以，语法上没有任何意外。 这是一个示例，其中包含一个局部变量，该变量仅在定义它的类中可用。

.box {
  --padding: 10px;
  
  height: calc(var(--padding) + 100px);
  padding: var(--padding);
}

谨慎使用calc() 。 这不是一件坏事，但是当过度使用时，调试和维护会很麻烦。

通过 JavaScript 获取和设置 CSS 变量

通过使用纯 JavaScript，您可以设置新的 CSS 变量并访问它们的值。 我不使用这种方法。 相反，我更喜欢更改元素的类。 但是，如果您想通过 JavaScript 访问 CSS 变量，这并没有错。 它在某些情况下肯定是有用的。 坚持使用 jQuery 的人，可以将代码转换为 jQuery 插件。

要创建一个新变量，或更改现有变量的值，请使用：

// set var value
document.documentElement.style.setProperty('--my-var', 'blue');

访问变量有点复杂。 如果变量是通过 JS 定义的，那么使用：

// get var value if defined via JS
document.documentElement.style.getPropertyValue('--my-var');

但是，如果它是通过 CSS 定义的（通常是这样），请使用以下代码：

// get var value if defined via CSS
getComputedStyle(document.documentElement,null).getPropertyValue('--my-var');

需要注意的问题和事项

既然您知道如何使用变量，就不要过度使用它们并为样式表中的每个属性值创建一个变量。 例如，这将是对整个概念的过度杀伤和滥用；

:root {
  --spacing-10: 10px;
}

.custom-box {
  padding: var(--spacing-10);
}

你一无所获。 刚得到--spacing-10而不是10px 。 您很快就会为从 5px 到 100px 的每个填充像素值创建另外 20 个变量。 如果您要保持一致性，请使用--small-padding, --medium-padding, --large-padding的概念并分配适当的数值。

尽管 CSS 标准没有要求，但我全心全意地建议在一个位置和 CSS 文件的开头定义所有变量。 这样，您将始终知道它们在哪里，并且可以迅速更改值。 如果您将定义分散在整个文件中，您将很难跟踪事物，并且最终可能会在多个位置定义相同的变量。 调试不会是一项有趣的任务。

没有理由不使用 CSS 变量

在 Internet 上，事情发展得很快（例如 cookie 被本地存储取代）。 对于大型项目和大型团队来说，切换到像 Saas 这样的 CSS 预处理器是正确的选择。 但是，对于较小的项目或需要维护的现有项目，纯 CSS 中的 CSS 变量是正确的解决方案。 它们完全不需要更改、软件或工具升级或任何东西。 您定义一个变量并开始使用它。