快使用CSS变量哼哼哈嘿（var）

最新推荐文章于 2024-02-21 14:37:32 发布

乔珂力

最新推荐文章于 2024-02-21 14:37:32 发布

阅读量410

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/keliq/article/details/119581303

版权

本文介绍了CSS变量的语法、作用域以及常见的陷阱，包括important的陷阱、值类型的陷阱、URL替换的陷阱和单向数据流的陷阱。通过示例，解析了CSS变量如何定义、引用以及在特定情况下的行为，帮助开发者更好地理解和使用CSS变量。

摘要由CSDN通过智能技术生成

前端在还原设计稿的时候，一般会定义一些 CSS 变量，因为页面配色规则是固定的，把这些搭配做成变量方便后期快速调整，达到升级 UI 甚至换肤的目的。目前所有主流浏览器都支持 CSS 变量了，所以大家可以大胆的用起来。

css变量

在 CSS 中用两根连词线 -- 表示变量（确实很不习惯，因为 sass 和 less 两个预处理器占用了 $ 和 @ 前缀，为了兼容只能用 -- 了，大家忍一下），定义变量的语法为：

--name: value;

其中：

name 是变量名。要注意，变量名 name 是大小写敏感的，即：--name 和 --Name 是不同的变量，可以用数字、字母、下划线、短横线进行组合，与其他语言最大的不同是：变量名可以用数字开头，也可以用中文。
value 是变量值。可以是一个字符串，例如 'hello'；也可以是数字，例如：20；也可以正常的 CSS 值，例如：20px、red 等。

引用变量的语法为：

var(--name, defaultValue);

例如：

:root {
   
  --1: #ccc;
  --蓝色: #369;
}
body {
   
  background-color: var(--1);
  color: var(--蓝色, blue);
}

不熟悉 CSS 变量的朋友可能会问：:root 是什么意思？其实你可以把它看成全局作用域，里面声明的变量，所有的选择器都可以用。当然，有全局作用域就有局部作用域，例如：

div {
    --color: red; }
.box {
    --color: blue

关注

专栏目录