网上视频不说的css变量设置

说明

有很多css基础视频，都没有讲到css中也可以设置变量。那我是怎么知道的呢？嘿嘿，面试官会给你交流的嘛。

这个学习可以去看MDN，也可以去看阮一峰的博客。

设置变量

在css中我们可以使用 -- 两个连续的减号来设置变量，那如何引用呢？我们可以使用 var() 来引用。

不过呢我们设置变量的时候，需要放在规则集里面。通常的最佳实践是定义在根伪类 :root 下，这样就可以在 HTML 文档的任何地方访问到它了。

:root {
    --bg-color: red;
}

input {
    background-color: var(--bg-color);
}

上面的代码可以将 input 输入框背景颜色设置为红色。

在css中设置的变量名会大小写敏感的，如果上面写成 --Bg-color，那么它和 --bg-color就是两个不同的变量。

可以放入很多值，比如：

:root {
    --color: red;
    --bg-color: rgb(255, 255, 255);

    --height: 68px;
    --padding: 10px 20px;

    --duration: .35s;
    --font-family: "external link";
    --margin-top: calc(2vh + 20px);
}

这里提醒一下：在css中设置变量是 --，less中是 @，sass 中是$。

获取css变量

我们上面已经说到了，读取变量使用 var()。

:root {
    --bg-color: red;
}

input {
    background-color: var(--bg-color);
}

我们还可以在变量声明中嵌套声明变量。

:root{
    --color: red;
    --bg-color: var(--color);
}

我们还可以传入第二个参数，它表示变量的默认值。如果该变量不存在，就会使用这个默认值。

color: var(--bg-color, tomato);
padding: var(--padding, 20px 30px);
font-family: var(--font-family, 'Courier New', Courier, monospace);

可以看到上面的代码中，第二个参数有的是空格、有的是逗号分隔，这是因为第二个参数不会处理他自身的空格和逗号的。

注意：我们设置变量时只能使用变量值，而不能使用变量名。没有效果，也不会报错。

:root {
    --bg-color: background-color
}

input {
    /* 这是没有效果的 */
    --bg-color: var(--bg-color, tomato);
}