摆脱预处理语言，深入学习css的自定义属性

如今的前端开发人员都会使用一些工具来帮助他们创建和编辑CSS。 而其中一种工具是预处理器，使用预处理器的主要优点之一是可以在样式中使用变量，这消除了复制和粘贴的需要，这使得重构变得更容易。

当使用预处理器变量时，开发人员倾向于使用颜色，字体大小，布局细节等来定义它们。这一切都很好，但预处理器变量有一些限制：

1. 1. 不能被JavaScript操纵，预处理器变量在它们到达浏览器之前被提前编译，如CSS属性/值。

2. 2. 没有意识到DOM或CSSOM，就像上面提到的一点，变量是提前编译的，所以开发人员就没有机会从中了解这些细节。

3. 3. 不能被继承，在选择器上定义预处理变量并不意味着该选择器的后代也可以使用该变量。

我们再深讨这个话题之前，你最好知道CSS有一个变量，那就是currentColor关键字（currentColor在css的标签属性中属于高级，但是很少有人知道，自然也不怎么为人所用，感兴趣的话可以上MDN的查下具体用法）。这个支持的变量引用了一个元素的当前颜色值。

虽然currentColor功能强大，但它有其局限性，只能接受颜色值。

定义自定义CSS属性

CSS规范的伟大创造者也就是W3，并没有创建CSS变量。对于创建自定义属性的定义是：

一个自定义的属性，被称为自定义属性的自定义属性的家族，允许作者将任意值分配给具有作者选择名称的属性，以及var()函数，该函数允许作者在文档中其他地方使用这些值。

自定义属性就像其他的CSS属性一样，可以在任何元素上定义，并且他们可以使用相同的继承和级联。 它们可以是有条件的，在媒体查询中设置的，以及其他规则；而且，它们可以被内联和样式标记。

CSS自定义属性有两个主要部分：声明自定义属性和读取声明的自定义属性。

声明一个自定义属性

声明一个自定义的属性，通过 -- 来定义它的名字，然后分配一个值。

注意：属性名称区分大小写。所以--bodyColor和--BodyColor是两个不同的自定义属性。

读取自定义属性

要读取CSS自定义属性，就需要使用var函数：

上面，我们使用一个伪类root来自定义linkColoron的属性，然后使用var函数来获取属性的值来设置链接的颜色值。 由于我们在伪类root上定义了linkColor，我们可以访问a标签选择器中的linkColor变量。

我们看看其他的例子：

在上面的例子中，我们在a选择器中定义linkColor，但是我们试图在button选择器中引用它。由于我们在a选择器中定义了linkColor，因此linkColor不会被定义，而我们最终会得到一个继承的颜色值。

需要注意的是，对于自定义属性，如果未找到相应的值将根据特定的属性进行初始化或继承。

为了解决这种情况，我们的自定义属性可能没有定义，或者在使用时可能没有值，在var函数添加一个回退参数。

在上述情况下，如果headingColor属性未定义或没有值的时候，h1将回退到红色。

不使用JavaScript更改自定义CSS属性

让我们以一个非常简单的例子来说明在hover上更改自定义属性：

通过上面的代码你可以知道，鼠标悬停button会将buttonBackground的值重新定义为blue。

我们通过这一个简单的例子，演示了在没有自定义属性的情况下完成。但是，如果我们同时改变其他几个属性和值会发生什么呢?这种能力使我们能够创建更可读的代码。让我们看一个更高级的例子。

我们将伪类root中的borderRadius设置为10px。 然后我们在button中的border-radius的值使用这个自定义属性，也在媒体查询中重新定义了borderRadius的值为15px。 如果我们屏幕宽度为768px或更大的时候，button中border-radius的值为15px。

使用JavaScript更改自定义CSS属性

现在，自定义属性引人触目的是它们与JavaScript一起使用的能力。 在JavaScript中使用CSS自定义属性时，我们需要做的两个主要部分是读取属性并在属性上设置一个新值。

获取自定义属性的价值

要获取内联自定义属性值的值，只需使用以下内容：

要从样式表中获取自定义属性值或继承它：

我会使用上面的方式来获取值，因为它将适用于内联值不像第一个会被覆盖。

设置自定义属性的值

设置自定义属性的值非常简单：

以上将在元素上将foo的值设置为4，很简单吧。

总结

CSS自定义属性是一个非常强大的方式，让你调整你的样式表。它们是分离JavaScript行为和样式的一种方式，如在JavaScript中设置CSS中的信息以用于样式的功能所示。

即使您为CSS使用预处理器，CSS自定义属性仍然可以直接嵌入到CSS中。 原因是自定义属性可以与DOM或CSSOM交互，并且可以与预处理器变量不同的动态更改。