变量计算

# 变量计算

# 前言

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

# 一、基础知识

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

# 1.1 作用域

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

:root {
    --themeColor: blue;
}

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

1
2
3
4
5
6
7

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

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

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

1
2
3

# 1.2 默认变量

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

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

1
2
3

# 1.3 JS操作变量

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

1
2
3
4
5
6

# 二、玩法

# 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>

1
2

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

1
2
3
4
5
6

# 2.1.2 按钮颜色

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

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

1
2

# 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));
});

1
2
3
4

# 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`);
}