CSS 变量 - 2024 年学习 CSS 变量

h2 { border-bottom: 2px solid blue; }

.container {

color: white;

background-color: white;

padding: 15px;

}

button {

background-color: white;

color: blue;

border: 1px solid blue;

}

如果您看到上面的代码，如果我说您不想在网站上显示任何蓝色并将该颜色更改为绿色。即使最后一个代码很短，但仍然要更改颜色，您必须复制并粘贴每条颜色线，对吗？？

因此，对于这种情况，我们使用变量，现在想想如果我们只是制作一个变量“颜色”并将蓝色存储在其中。

并且只需将所有颜色编码为等于该变量而不是“蓝色”。如果我们这样做。现在，我们只需在一行中更改颜色，所有颜色都会自行更改。

是不是很厉害？？？

定义变量

---

我们通常在:root选择器中定义变量

为什么？如果我们在 root 中声明一个变量，那么我们可以从代码中的任何地方访问它，但是如果您在任何其他元素中定义一个变量，您将能够在 { } 中使用它。这基本上称为范围。

在 :root 中声明变量的语法是

确保变量名必须以 (–) 双破折号开头，并且区分大小写，这意味着“–variable”不等于“–VARIABLE”

访问变量

---

好的，我们定义了一个变量，但是我们如何访问它。为此，我们在 CSS 中有 var() 函数

因此，现在让我们看一个使用 CSS 变量的完整示例。

:root{

–primary-color: blue;

–secondary-color: white;

}

body { background-color: var(–primary-color); /blue color/}

h2 { border-bottom: 2px solid var(–primary-color); /blue color/}

.container {

color: var(–primary-color); /white color/

background-color: var(–secondary-color); /white color/

padding: 15px;

}

button {

background-color: var(–secondary-color); /white color/

color: var(–primary-color); /blue color/

border: 1px solid var(–primary-color); /blue color/

}

所以，现在如果你看到上面的代码，你就可以知道如何在 CSS 中使用变量了。现在您只需 1 行即可轻松更改颜色。

一、Python所有方向的学习路线

Python所有方向的技术点做的整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照下面的知识点去找对应的学习资源，保证自己学得较为全面。

二、Python必备开发工具

工具都帮大家整理好了，安装就可直接上手！

三、最新Python学习笔记

当我学到一定基础，有自己的理解能力的时候，会去阅读一些前辈整理的书籍或者手写的笔记资料，这些笔记详细记载了他们对一些技术点的理解，这些理解是比较独到，可以学到不一样的思路。

四、Python视频合集

观看全面零基础学习视频，看视频学习是最快捷也是最有效果的方式，跟着视频中老师的思路，从基础到深入，还是很容易入门的。

五、实战案例

纸上得来终觉浅，要学会跟着视频一起敲，要动手实操，才能将自己的所学运用到实际当中去，这时候可以搞点实战案例来学习。

六、面试宝典

简历模板

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里无偿获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！