前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >[译] 不容错过的CSS变量

[译] 不容错过的CSS变量

作者头像
_sx_
发布2019-08-07 14:46:41
8470
发布2019-08-07 14:46:41
举报
文章被收录于专栏:前端技术地图

[译] 不容错过的CSS变量

Bobi.ink

2019-07-06

原文链接: Don’t miss out on css variables

当我第一次听说CSS变量时,我是抱着怀疑太多的。scss、sass、less和stylus这些CSS预处理器不是都有变量机制吗? 为什么还要使用它?过了几年,我发现越来越多的人开始讨论和使用它,我觉得我是错过了什么…… 虽然花费了一点功夫,但在使用后,我确实被它吸引住了。这篇文章我会阐述到底是什么推动我进一步去探索CSS变量,并在实际项目中使用它。

用法

在选择器里面声明变量,变量名以--作为前缀:

代码语言:javascript
复制
div {
  --bgColor: deeppink;
}

一个流行的方式是在:root选择器中定义变量,这相当于定于全局变量:

代码语言:javascript
复制
:root {
  --bgColor: teal;
}

通过var()函数来引用变量:

代码语言:javascript
复制
div {
  background: var(--bgColor);
}

var()函数还可以接受一个参数,用作变量的默认值,当变量未定义时回退到这个默认值:

代码语言:javascript
复制
header {
  background: var(--bgColor);
  color: var(--color, beige);
}

上面代码的运行结果如下:

主题

利用CSS变量,可以很容易地实现主题机制.

在body元素上为不同的主题创建不同的类名,并定义合适的变量值:

代码语言:javascript
复制
body.sunrise {
  --background-color: #fff;
  --text-color: #333;
}

body.sunset {
  --background-color: #333;
  --text-color: #fff;
}

使用这些变量:

代码语言:javascript
复制
html,
body {
  background: var(--background-color);
  color: var(--text-color);
}

现在切换body元素的类名到sunrise或sunse,CSS变量会叠层应用到所有选择器.

Javascript API

我觉得这是CSS变量最好的部分 —— CSS变量可以通过Javascript API来获取和设置。SCSS/Less这些预处理器的变量可做不到(部分预处理器已支持编译到到CSS变量)。

通过getPropertyValue方法来获取变量:

代码语言:javascript
复制
getComputedStyle(document.documentElement).getPropertyValue('--color')

如果要获取具体元素的的变量值, 先通过querySelector获取元素:

代码语言:javascript
复制
getComputedStyle(document.querySelector('h1')).getPropertyValue('--color')

通过style.setProperty来设置变量值:

代码语言:javascript
复制
document.documentElement.style.setProperty('--color', 'red')

设置具体元素的变量值:

代码语言:javascript
复制
document.querySelector('h1').style.setProperty('--color', 'blue')

这个API提供了一个简洁的方式来使用CSS变量.

几天前, 我通过David KXState DEMO接触到了这个使用场景: 当用户鼠标拖拽时, 通过CSS变量来确定选择框的定位(基于鼠标的开始位置和当前位置):

代码语言:javascript
复制
.selectbox {
  left: calc(var(--mouse-x1));
  top: calc(var(--mouse-y1));
  width: calc((var(--mouse-x2) - var(--mouse-x1)));
  height: calc((var(--mouse-y2) - var(--mouse-y1)));

  color: rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.1);
  border: 2px solid currentColor;
  position: absolute;
  transition: opacity 0.3s ease-in-out;
}

在鼠标事件处理器中更新CSS变量:

代码语言:javascript
复制
document.documentElement.style.setProperty(
  '--mouse-x1',
  ctx.selectArea.x1 + 'px',
)
document.documentElement.style.setProperty(
  '--mouse-y1',
  ctx.selectArea.y1 + 'px',
)
document.documentElement.style.setProperty(
  '--mouse-x2',
  ctx.selectArea.x2 + 'px',
)
document.documentElement.style.setProperty(
  '--mouse-y2',
  ctx.selectArea.y2 + 'px',
)

最后

如果你像我一样觉得CSS变量没有用,或者压根不知道它的存在,我希望这篇文章可以为你开启一扇门,来探索它的使用场景。

Javascript API让我踩了不少坑,但是它确实让我开了眼界,我期待未来能够更多使用和了解它们。

译者注: 本文并非完全照搬原文,即意译. 另外女朋友也给我校验过了,确保大体没有搞错? 因为笔者自己原创的文章阅读量比较惨淡,所以笔者近期会尝试翻译一些文章,学习这些文章是怎么写的,也积攒点人气,以便后面原创文章有更多阅读量

扩展

Please enable JavaScript to view the comments powered by Disqus.

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-07-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • [译] 不容错过的CSS变量
    • 用法
      • 主题
        • Javascript API
          • 最后
            • 扩展
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档