变量计算

前言

第一次接触CSS变量，是想像element那样可以全局控制主题样式；后来为了追求极致的动画效果，利用CSS变量，方便了JS去控制CSS的样式。刚好借此小册的学习机会，建立较为完善的知识体系，看看有没有其他什么新玩法。

一、基础知识

CSS变量，也可以称为自定义属性，主流浏览器都知识。

1.1 作用域

在当前节点块作用域及其子节点作用域下有效。
全局变量需在:root中声明，局部则在指定的组件里声明即可。

:root {
    --themeColor: blue;
}

.header {
    color: var(--themeColor);
}
 

支持在内联CSS样式中使用CSS变量。

<header class=".header" style="--themeColor:blue"></header>
 

.header {
    color: var(--themeColor);
}
 

1.2 默认变量

若--titleColor无效，则颜色会默认为blue。

.title {
    color: var(--titleColor, blue);
}
 

1.3 JS操作变量

// 读取变量
ele.style.getPropertyValue()
// 设置变量
ele.style.setProperty()
// 删除变量
ele.style.removeProperty()
 

二、玩法

2.1 快速切换样式

对于需要重复用到的样式，但又有小部分样式不同时，一般会选择将共用样式抽离出来，或者使用不同的类名来实现。学习了CSS变量后，就又得到了另一种实现思路。对于UI频繁修改的情况下，这种实现就可以不用那么烦UI改动了。

2.1.1 FlexBox布局方式

用Flex实现布局是最常见的了，一个个FlexBox有时会有一点排布上的不同，但这时借用CSS变量，就不需要我们另外去定义一个样式了。

<div class="diy-flex" style="--justify: space-around;"></div>
<div class="diy-flex" style="--align: stretch;"></div>
 

/* 默认的是实际项目中最常见的布局*/
.diy-flex {
    display: flex;
    justify-content: var(--justify, space-between);
    align-items: var(--align, center);
}
 

2.1.2 按钮颜色

大多情况下，按钮大致的样式是一样的，一般要改的就是颜色。

<button style="--color: #5e35b1;">取消</button>
<button style="--color: #ec2828;">确认</button>
 

2.2 JS变换主题颜色

但凡需要通过JS来控制CSS样式的，都可以考虑使用CSS变量。

["red", "blue", "green"].forEach(v => {
    const btn = document.getElementById(`${v}-theme-btn`);
    btn.addEventListener("click", () => document.body.style.setProperty("--bg-color", v));
});
 

2.3 鼠标动画

对于鼠标动画，需要频繁通过JS获取坐标信息，再通过DOM操作改变CSS样式。如果使用CSS变量，就可以大大减少DOM操作。

2.3.1 放大镜/拖拽

move(e) {
    e.target.style.setProperty("--x", `${e.offsetX}px`);
    e.target.style.setProperty("--y", `${e.offsetY}px`);
}
 

总结

• CSS使用变量的好处
  • 减少样式代码的重复性
  • 增加样式代码的扩展性
  • 提高样式代码的灵活性
  • 增多一种CSS与JS的通讯方式
  • 不用深层遍历DOM改变某个样式
• 参考资料：
  • 巧借CSS var变量实现任意的CSS自定义语法
  • 使用内联的 CSS 变量技巧，提高灵巧布局效率！

本文正在参与「掘金小册免费学啦！」活动, 点击查看活动详情 。