CSS竟然开始支持函数了!编程语言的未来能否在此掀起波澜?

开发 前端
CSS函数就像内置版的“混合宏”(Mixin),无需额外预处理器即可实现复用性更佳的CSS代码。这使你的样式代码更易维护、更整洁易读,并实现以往只有Sass或JavaScript才能完成的高级动态效果。

当我第一次看到CSS即将支持原生函数时?没错,朋友,这是真的!

如今,CSS也开始拥抱函数特性了——那些曾坚称CSS不配称作“编程语言”的人,现在或许得重新考虑一下了。

好了,兴奋之余,我们还是先稳一下,深入了解它的具体内容吧!

基础知识:函数的定义和调用

试想一下,你正在给网页中的多个元素添加相同的虚线边框。通常的写法是:

div {
  border: 2px dashed black;
}
p {
  border: 2px dashed black;
}
span {
  border: 2px dashed black;
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

虽然不算麻烦,但如果可以一句话简单告诉CSS:“嗨,给我来个虚线边框”,岂不是美滋滋?

现在,通过CSS新增的@function功能,你完全可以这么做:

@function --dashed-border() {
  result: 2px dashed black;
}
  • 1.
  • 2.
  • 3.

定义完毕,你便能随心调用它:

div {
  border: --dashed-border();
}
  • 1.
  • 2.
  • 3.

神奇吧?从此,每次需要虚线边框,你只需简单调用--dashed-border(),CSS会为你完成其余工作。

更强大!支持参数的函数

CSS函数还支持参数调用,这使它更加强大灵活。比如我们要实现不同颜色的边框:

@function --dashed-border(--color: red) {
  result: 2px dashed var(--color);
}
  • 1.
  • 2.
  • 3.

使用时非常简单:

div {
  border: --dashed-border(blue); /* 蓝色虚线边框 */
}
  • 1.
  • 2.
  • 3.

告别到处“硬编码”颜色,一个函数,带来无限的可能。

不止边框:尺寸与布局也能用函数搞定

CSS函数最大的特点是能返回值,因此它们也能用于尺寸、间距甚至运算表达式里:

@function --double-size(--size: 10px) {
  result: calc(var(--size) * 2);
}

.box {
  padding: --double-size(15px); /* 结果为30px */
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

再比如,构建更灵活的网格布局间距:

@function --gap(--scale: 1) {
  result: calc(var(--scale) * 8px);
}

.grid {
  display: grid;
  gap: --gap(2); /* 16px */
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

你的设计体系会因此变得更易于控制、更统一规范。

类型检查与默认值机制,拒绝错误更智能

CSS函数还引入了类型检查机制,你可以明确设定函数参数应接收的具体类型:

  • length(长度单位如px, em)
  • color(颜色值)
  • number(纯数字)
  • angle(角度值如deg)

举个例子:

@function --rotate-element(--angle: 45deg) {
  result: rotate(var(--angle));
}

.box {
  transform: --rotate-element(90deg);
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

若你传递了错误的类型(例如px单位),则函数不会执行,这就能有效避免潜在样式bug。同时,CSS函数还支持默认参数值,使调用更加灵活。

组合嵌套函数:无限创意的入口

当你将多个函数组合嵌套,CSS的表现力更上一层楼:

@function --shadow-color(--color: black) {
  result: rgba(var(--color), 0.5);
}

@function --box-shadow(--color: black, --size: 10px) {
  result: 0 0 var(--size) --shadow-color(--color);
}

.card {
  box-shadow: --box-shadow(red, 20px);
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

上例中,两个函数相互调用,实现了复杂的动态半透明阴影效果,赋予设计更多可能。

当前浏览器支持情况

当然,在你兴奋地全面重构CSS代码之前,有件事得明确:目前CSS函数尚处于实验阶段,仅限Chrome Canary浏览器(需手动开启实验功能)才能使用。

若你想尝鲜,可按以下步骤:

  • 下载并安装Chrome Canary
  • 打开chrome://flags
  • 启用Experimental Web Platform features选项

体验一把CSS的未来世界。

CSS的未来展望

综上,CSS函数就像内置版的“混合宏”(Mixin),无需额外预处理器即可实现复用性更佳的CSS代码。这使你的样式代码更易维护、更整洁易读,并实现以往只有Sass或JavaScript才能完成的高级动态效果。

在所有浏览器全面支持之前,请保持关注、积极尝试。毕竟,任何能拯救我们于重复代码之中的技术,都是值得庆祝的胜利!

责任编辑:姜华 来源: 大迁世界
相关推荐

2020-06-30 08:55:45

边缘计算物联网人工智能

2021-12-26 23:02:16

加密货币金融区块链

2015-11-02 17:25:23

Elixir编程语言未来

2020-10-13 06:34:15

编程语言IDE

2023-04-12 10:34:29

2013-05-29 09:47:42

编程语言移动开发java

2019-07-25 09:15:07

编程语言GoJava

2020-08-18 08:26:37

Python编程语言高考

2009-02-03 09:15:20

C#VB.NETLinq

2018-11-15 10:20:59

Python函数式编程编程语言

2022-08-25 19:03:25

编程语言

2010-03-10 18:33:58

Python编程语言

2010-03-29 17:56:20

Nginx反向代理

2012-04-05 09:49:10

Windows 8编程语言

2012-08-17 10:11:40

云计算安防应用模式

2014-07-14 15:51:08

AndroidGO语言

2020-09-22 11:00:11

Java技术开发

2020-09-23 07:50:45

Java函数式编程

2021-08-23 15:05:21

PyretJavaScript编程

2024-02-23 09:00:00

编程语言编译器工具
点赞
收藏

51CTO技术栈公众号