CSS | 10分钟学会css原生变量

这是我参与更文挑战的第18天，活动详情查看 更文挑战

当我们项目有大量css代码时，通常就会有很多重复的值。比如同样一个颜色值可能在成千上百个地方被使用到，如果想要改这一个值，一个一个替换很显然是很不现实的。这个时候我们就需要用变量来控制了，庆幸的是，原生css本身就支持变量的使用。

声明css变量

声明变量的方式就是在变量名前面加两根连词线（–）

body{
    --main-bg-color:#99CCFF;
}
复制代码

注意

1） css变量大小写敏感， --main-bg-color 和 --Main-Bg-Color是不同的。

2） 【css变量】也叫做【CSS自定义属性】

3） 我们需要一个地方来放置自定义属性。虽然可以在任何样式规则中指定自定义属性，但到处定义属性并不是一个好主意，这对CSS的可维护性和可阅读性是一个挑战。

【:root】 伪类代表了HTML文档的根元素，这是一个放置自定义属性的好位置，因为我们可以通过其他更具特异性的选择器来覆盖自定义属性值。

所以上面的声明最好改为：

:root{
    --main-bg-color:#99CCFF;
}
复制代码

使用css变量

利用var()函数来读取变量

.box{
    width: 100px;
    height: 100px;
    background: var(--main-bg-color);
}
复制代码

var()函数还可以用第二个参数，表示变量的默认值，如果使用的变量未声明，则会使用默认值。

注意

1） 如果变量值是数值，不能与数值单位直接连用。

错误使用:

正确使用：

利用calc()函数连接。

:root{
    --space:20
}
.box{
   margin: calc(var(--space) * 1px);
}
复制代码

2）如果变量带有单位，不能写成字符串。

错误使用：

正确使用：

:root{
    --space:20px
}
.box{
   margin:var(--space);
}
复制代码

css变量的继承

自定义属性会继承。这意味着如果在一个给定的元素上，没有为这个自定义属性设置值，在其父元素上的值会被使用。

看这一段HTML

<div class="div1">
    div1
    <div class="blue div2">
        div2
        <div class="red div3"> div3</div>
        <div class="div4"> div4</div>
    </div>
</div>
复制代码

在两个地方定义变量

.blue {
    --test:#99CCFF;
}
.red {
    --test:#FF3333;
}
复制代码

下面我们来看一下每一个的生效情况

1）对于class=”div1″，变量未定义，使用了默认值白色

2）对于class=”div2″，使用了自己元素上定义的变量，蓝色

3）对于class=”div3″，自己元素上定义的变量比父级的高，使用了红色

4）对于class=”div4″，继承了父级div2的变量，使用了蓝色

不能为元素设置一个属性，然后让它从兄弟或旁支子孙规则上获取值。属性仅用于匹配当前选择器及其子孙，这和通常的CSS是一样的。

css变量作用域

看下面的一段HTML代码

<div class="box div1" id="first">方块一</div>
<div class="box div2">方块二</div>
<div class="box div3">方块三</div>
<div class="box div4">方块四</div>
复制代码

配套的CSS

:root { --bg: blue; }
div { --bg: green; }
#first { --bg: red; }
* { background: var(--bg); }
复制代码

效果

上面代码中，三个选择器都声明了–color变量。不同元素读取这个变量的时候，会采用优先级最高的规则，因此三段文字的颜色是不一样的。

这就是说，变量的作用域就是它所在的选择器的有效范围。

JavaScript操作CSS变量

在 JavaScript 中获取或者修改 CSS 变量和操作普通 CSS 属性是一样的：

// 获取一个 Dom 节点上的 CSS 变量
element.style.getPropertyValue("--my-var");

// 获取任意 Dom 节点上的 CSS 变量
getComputedStyle(element).getPropertyValue("--my-var");

// 修改一个 Dom 节点上的 CSS 变量
element.style.setProperty("--my-var", jsVar + 4);
复制代码

CSS 变量和预处理器变量有什么区别？

在为网站设置样式的时候，为了更灵活的使用css，最常见的方法就是使用Sass和Less等预处理器。预处理器可以设置变量并在函数、循环、数学运算等中使用它们。

这是否意味着 CSS 变量无关紧要？

不完全是，主要是因为 CSS 变量与预处理器变量不同。不同之处在于 CSS 变量是在浏览器中运行的实时CSS属性，而预处理器变量最终还是被编译为常规的CSS代码。浏览器认识css变量，但是对预处理器变量一无所知。

这意味着你可以更新样式表文档中、内联样式属性和 SVG 展示属性中的 CSS 变量，或者选择使用 JavaScript 即时操作它们。但是预处理器变量做不了这些。

如果你使用Less/Sass之类的预编译工具，基本上用到的就是变量，其他高级功能，几乎不怎么用，那直接使用原生css变量就够了。

css变量

1）动态性，可以在运行时更改
2）可以方便地从js读写
3）可继承，可组合，有作用域
复制代码

预处理器

1）预处理器的变量不是动态的，在运行时不可更改
2）预处理器的变量没有作用域的说法
3）不能与js交互
复制代码

---

引用参考：
Using CSS custom properties
A Practical Guide to CSS Variables

小可爱看完就点个赞再走吧！???