玩转CSS的艺术之美-变量计算 | 小册免费学

我心飞翔 分类:javascript

变量计算

前言

第一次接触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 变量技巧,提高灵巧布局效率!

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

回复

我来回复
  • 暂无回复内容