Words etch cherished moments.
OG

CSS变量

1,808 words, 5 min read
2018/04/26 AM
727 views

前几天偶然看到网络上的一篇文章,原生 CSS 竟然支持变量(其实就是自定义属性),我们工作中都是使用预处理器 Sass 或者 Less 实现变量, 现如今, 我们也可以使用原生的 CSS 变量了.

首先, 我们看看 浏览器对变量的支持 can i use

#变量声明

声明变量的时候, 变量名前要加 -- ( 就是两个减号 )

          
  • 1
  • 2
  • 3
  • 4
  • 5
body { --primary-color: #0088f5; --text-color: rgba(0, 0, 0, 0.54); --text-indent: 2em; }

我想小伙伴们都使用过 Sass 或者 Less 等预处理器了吧, 在 Sass 中是表示变量使用的是 $, Less中表示变量的是@, 而 CSS 出现变量比较晚, 好的声明变量的符号已经被占用了, 而官方为了不产生冲突, 只能使用 --, 定义的变量值只要符合 CSS 规范的都可以

#变量使用

这里要介绍一个新函数 var(), 该函数用于读取变量

          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
a { color: var(--text-color); } a:hover { color: var(--primary-color); } p { text-indent: var(--text-indent); }

当然 var() 也可设置一个默认值, 它需要第二个参数即默认值, 如果变量不存在就会使用这个默认值

          
  • 1
  • 2
  • 3
  • 4
a { color: var(--disable-color, #eee); /* 这里的 --disable-color 不存在, 将会使用默认值 */ }

#作用域

同一个 CSS 变量,可以在多个选择器内声明。读取的时候,优先级最高的声明生效。这与 CSS 的"层叠"(cascade)规则是一致的

          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
<!DOCTYPE html> <html> <style> :root { --color: blue; } div { --color: green; } #alert { --color: red; } * { color: var(--color); } </style> <body> <p>蓝色</p> <div>绿色</div> <div id="alert">红色</div> </body> </html>

上面的代码中, 三个选择器都声明了 --color 变量, 不同的元素读取这个变量的时候, 会采用优先级最高的规则, 所以三段文字的颜色是不一样的, 也就是说变量的作用域就是它所在选择器的有效范围

因此,如果我们要定义全局变量就需要把变量定义在全局, 确保所有元素都可以读取到他们

          
  • 1
  • 2
  • 3
  • 4
  • 5
/* :root表示html元素, 除了优先级更高之外, 与html选择器相同 */ :root { --color: #ccc; --primary-color: #007aff; }

#JavaScript操作CSS变量

          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
// 设置变量 document.body.style.setProperty('--primary-color', '#007aff'); // 读取变量 #007aff document.body.style.getPropertyValue('--primary-color'); // 删除变量 document.body.style.removeProperty('--primary-color');
Published at2018/04/26 AMinCode
#CSS
Creative Commons BY-NC 4.0
https://zhangwurui.cn/article/4
0/0comments
Guest
Start the discussion...
Be the first to comment