CSS 变量 - 2024 年学习 CSS 变量(1)

我们通常在: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 行即可轻松更改颜色。

您可以使用变量来存储任何 CSS 值。甚至存储整个边界值。是不是很棒？

🥇 评论区抽粉丝送书啦

---

💌 欢迎大家在评论区提出意见和建议! (抽三位幸运儿送书，实物图如下)💌

《Vue.js框架与Web前端开发从入门到精通》

【内容简介】

**本书从Vue.js框架技术的基础概念出发，逐步深入Vue.js进阶实战，并在最后配合一个网站项目和一个后台系统开发实战案例，重点介绍了使用Vue.js+axios+ElementUI+wangEditor进行前端开发和使用组件进行Vue单页面网页复用，让读者不但可以系统地学习Vue.js前端开发框架的相关知识，而且还能对业务逻辑的分析思路、实际应用开发有更为深入的理解。

本书语言平实，用词诙谐，案例丰富，实用性强，特别适合刚入社会的职场新人、Vue.js框架的初级读者和进阶读者阅读，也适合希望从后台开发转型做前端的程序员等其他编程爱好者阅读。另外，本书也适合作为相关培训机构的教材使用。**

有不想靠抽，想自己买的同学可以参考下面的链接

京东自营购买链接：

《Vue.js框架与Web前端开发从入门到精通》- 京东图书

当当自营购买链接：

《Vue.js框架与Web前端开发从入门到精通》- 当当图书

文末有福利领取哦~

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

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

👉二、Python必备开发工具

👉三、Python视频合集

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

👉 四、实战案例

光学理论是没用的，要学会跟着一起敲，要动手实操，才能将自己的所学运用到实际当中去，这时候可以搞点实战案例来学习。（文末领读者福利）

👉五、Python练习题

检查学习结果。

👉六、面试资料

我们学习Python必然是为了找到高薪的工作，下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料，并且有阿里大佬给出了权威的解答，刷完这一套面试资料相信大家都能找到满意的工作。

👉因篇幅有限，仅展示部分资料，这份完整版的Python全套学习资料已经上传

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

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

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