--css 变量

为什么十六进制或 RGB 颜色这么难记？更不用说在更改配色方案时查找和更改它们有多麻烦了。CSS 变量来拯救你！如果你从未使用过 CSS 变量，现在就开始吧。它们在各个浏览器中都得到广泛支持，可以让你的设计变得轻而易举。

什么是--css变量

CSS 变量是一种将特定的 CSS 值赋给关键字，并在整个应用程序中重复使用的方法。CSS 变量可以具有局部或全局作用域，并且可以使用 JavaScript 进行操作。它们通常用于管理颜色，但 CSS 变量的使用方式多种多样。最简单的形式是，CSS 变量就是一个赋有值的关键字。

句法

声明和使用 CSS 变量非常简单。你需要记住以下三点：-- :root var().—-用于在赋值和声明变量时使用。要创建变量，必须—-在变量名前面加上 。

:root{
/* my variable name is main-color and my value associated with it is #5a9e4b */
--main-color: #5a9e4b;
}

:root就是声明全局作用域的方式。作用域基本上就是所有变量的访问范围。全局作用域意味着你可以访问整个 CSS 文件。你可以在—-variable-name类内部创建一个局部变量。局部变量意味着你只能在该类内部访问这个变量。

/* This is declaring a global variable that I can access from anywhere in my css file. Anything inside of :root is global.*/
:root{
—-main-color: #5a9e4b;
}

/* This is declaring a local variable. I can only access this variable inside of this class */
.container {
--main-text-size: 24px;
font-size: var(--main-text-size);
}

var()就是变量的命名方式。记住，变量只不过是一个具有固定值的关键字。要将此值传递给 CSS 属性，只需在 中输入变量的名称即可()。就这么简单！

/* creating a global variable for main-color */
:root{
—-main-color: #5a9e4b;
}

/* passing the variable name into the var function. This will put #5a9e4b as the value to the color property. */
.someClass {
color: var(—-main-color);
}

后备方案

不幸的是，并非所有浏览器都生而平等。虽然大多数浏览器都非常强大，但最佳实践是设置一些后备方案。您可以使用特殊语法为您的值设置后备方案。它var()与之前相同，但您添加了第二个参数。var(--main-color, blue);这将使用您的 CSS 变量--main-color，如果它无效或未定义，它将使该值等于蓝色。var()仅接受两个参数，第二个参数可以是额外的 CSS 变量（如果需要）。var(--main-color, var(--ultimate-fallback));这将尝试使用main-color第一个参数，如果其无效，则使用第二个参数--ultimate-fallback。

:root {
--main-color: #5a9e4b;
}

p {
/* will try --main-color first. If invalid will use blue */
color: var(--main-color, blue);

现在，对于不支持 css 变量的浏览器，这不会起到回退的作用。为此创建回退需要一些额外的工作，但是可以实现。CSS 一次读取一行。对于同一个类，您可以拥有具有两个不同值的相同属性，而 css 将使用最后写入的属性。我们可以利用变量来实现这一点。您可以在 css 类中硬编码回退，然后在下一行添加 css 变量。Css 将读取每一行，如果浏览器不支持 css 变量，则默认使用您硬编码的回退。如果浏览器支持 css 变量，那么它将使用它，因为它是在回退之后使用的。

:root {
--main-color: #5a9e4b;
}

p {
/* will use --main-color since it is last color property written. If invalid will then use blue.*/
color: blue;
color: var(--main-color);

使用 JavaScript

由于 css 变量可以访问 DOM，您可以使用 JavaScript 更改它们！使用此技巧，您可以制作一些非常有趣的用户界面。首先，像平常一样创建 css 变量。然后使用querySelector来访问root元素。现在您可以访问根元素了，您只需使用setProperty()方法来更改变量的值。这将更新该值，从而更新您使用该变量的整个 css 文件。该方法是 CSSStyleDeclaration 对象的方法。我不会详细介绍这个方法或您可以使用的其他方法。我希望这篇文章简洁明了，重点介绍 css 变量而不是 JavaScript。如果您想了解更多关于您可以做什么的信息，setProperty()请访问https://www.w3schools.com/jsref/obj_cssstyledeclaration.asp 。

:root {
—-primary-color: #5a9e4b;
}

p {
color: var(—-primary-color);
}

//gives me access to the root element
let rootElement = document.querySelector(':root');

//this will change the style of my —-primary-color variable to red.
rootElement.style.setProperty('--primary-color', 'red');

在上面的例子中，我有一个名为 的 CSS 变量，—-primary-color其值为#5a9e4b。然后，我将所有标签的颜色设置<p>为与新变量相同的值。在 JavaScript 部分，我首先创建一个等于根元素的变量。然后，我可以使用setProperty('variable name', 'new value')方法访问我的变量。第一个参数是变量名，第二个参数是新值。现在，我的所有<p>标签都将显示为红色！

现在，您已经掌握了在应用程序中使用 CSS 变量所需的知识。这将有助于提高开发速度、代码的可读性和可维护性。如果您对此感兴趣，可以研究一下 Sass 之类的工具，以进一步扩展您的 CSS 功能。