CSS 变量 - 2024 年学习 CSS 变量

最新推荐文章于 2024-08-22 18:18:21 发布

2401_84009488

最新推荐文章于 2024-08-22 18:18:21 发布

阅读量907

点赞数 21

分类专栏：程序员文章标签： css 学习前端

本文链接：https://blog.csdn.net/2401_84009488/article/details/137661675

版权

程序员专栏收录该内容

195 篇文章 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前端开发框架的相关知识，而且还能对业务逻辑的分析思路、实际应用开发有更为深入的理解。