by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11847
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、@function规则来啦

Chrome 139浏览器除了新支持了 CSS if()函数（参见“CSS倒反天罡居然支持if()函数了”一文），还支持了期待已久的@function规则。

@function规则可以让我们自定义运算逻辑，比之前单纯的CSS var()变量要更加强大。

下面我们通过几个案例带大家快速了解下@function规则的用法和作用。

二、@function规则精彩案例

先看下面这段代码，是我实际项目中代码的截图，大家注意看红框框部分：

字符版如下：

.board-bar-x {
  /* 略... */
  --bottom: calc(var(--offset-bottom, 0px) + 15px + 0.25rem);
  --bottom2: calc(var(--offset-bottom2, 0px) + 15px + 0.25rem);
  --size: calc(20px + calc((var(--char-length) + 1) * 1ch));
  --size2: calc(20px + calc((var(--char-length2) + 1) * 1ch));
}

实现功能是使用::before和::after伪元素绘制两条线。

在没有@function规则之前，当一个复杂计算需要多处使用的时候，我会定义专门的CSS变量进行简化，例如上面的--bottom和--bottom2，可即便如此，后面的计算逻辑我还是要一个一个罗列。

上面这句话有些人估计不明白，那我重新处理下，如果不使用CSS变量进行二次变量处理，那么实际的CSS代码会是这样（仅展示关键部分）：

.board-bar-x::before {
  position: absolute;
  bottom: calc(var(--offset-bottom, 0px) + 15px + 0.25rem);
  padding-bottom: calc(var(--offset-bottom, 0px) + 15px + 0.25rem);
}
.board-bar-x::after {
  position: absolute;
  bottom: calc(var(--offset-bottom2, 0px) + 15px + 0.25rem);
  padding-bottom: calc(var(--offset-bottom2, 0px) + 15px + 0.25rem);
}

会出现4个冗长的CSS属性值，使用CSS变量简化后，就会是这样：

.board-bar-x::before {
  position: absolute;
  bottom: var(--bottom);
  padding-bottom: var(--bottom);
}
.board-bar-x::after {
  position: absolute;
  bottom: var(--bottom2);
  padding-bottom: var(--bottom2);
}

但是，定义变量的那个地方，还是需要一一罗列：

.board-bar-x {
  --bottom: calc(var(--offset-bottom, 0px) + 15px + 0.25rem);
  --bottom2: calc(var(--offset-bottom2, 0px) + 15px + 0.25rem);
}

CSS @function就可以将这种罗列，也一并处理掉。代码示意：

@function --fn(--offset) {
  result: calc(var(--offset, 0px) + 15px + 0.25rem)
}
.board-bar-x {
  --bottom: --fn(var(--offset-bottom));
  --bottom2: --fn(var(--offset-bottom2));
}
.board-bar-x::before {
  position: absolute;
  bottom: var(--bottom);
  padding-bottom: var(--bottom);
}
.board-bar-x::after {
  position: absolute;
  bottom: var(--bottom2);
  padding-bottom: var(--bottom2);
}

或者不再使用CSS变量过渡，直接一步到位。

@function --fn (--offset) {
  result: calc(var(--offset, 0px) + 15px + 0.25rem)
}
.board-bar-x::before {
  position: absolute;
  bottom: --fn(var(--offset-bottom));
  padding-bottom: --fn(var(--offset-bottom));
}
.board-bar-x::after {
  position: absolute;
  bottom: --fn(var(--offset-bottom2));
  padding-bottom: --fn(var(--offset-bottom2));
}

是不是就容易理解多了？

三、更多自定义函数案例

1. 适合学习案例-取负值

CSS代码如下所示：

/* 返回当前值的负值 */
@function --negate(--value) {
  result: calc(-1 * var(--value));
}
aside {
  --size: 999em;
  padding-bottom: var(--size);
  margin-bottom: --negate(var(--size));
}

2. 高级案例 – media查询

/* 在小于640px的屏幕上为侧边栏占用1fr的空间，在较大的屏幕上使用相对具体具体宽度值 */
@function --layout-sidebar(--sidebar-width: max(20ch, 20vw)) {
  result: 1fr;
  
  @media (width > 640px) {
    result: var(--sidebar-width) auto;
  }
}

.layout {
  display: grid;
  /*侧边栏宽度兜底20ch和20vw的较大计算值 */
  grid-template-columns: --layout-sidebar();
}

实时效果如下所示（拖拽右下角的小按钮，改变宽度，看看布局有没有变化）：

3. 高级案例 – 和 if() 函数一起

示意代码：

@function --light-dark(--light, --dark) {
  result: if(
    style(--scheme: dark): var(--dark);
    else: var(--light)
  );
}

只要在body或者HTML元素上设置 style="--scheme: dark"，就会自动使用黑夜模式的变量。

四、结语及碎碎念

CSS 的 @function 规则为样式表带来了真正的编程能力，允许你定义可重用的计算逻辑，让 CSS 代码更灵活、模块化且易于维护。

基本语法

使用 @function 定义，result 返回结果，示意：

@function --fn-name(arg) { 
  result: ... 
}

支持传递参数，并可设置默认值。

例如：

@function --border(--color: red) { ... }

其他特性

支持声明参数类型（如 length, color, number, angle），增强健壮性。

函数内部可以调用其他函数，实现逻辑复用，或者使用嵌套其他规则，上面有案例。

总结一下 CSS @function 通过引入参数、返回值、类型检查和组合能力，让 CSS 拥有了更强大的抽象和复用能力。它是实现 “CSS 即设计系统” 理念的重要工具，能有效提升大型或动态项目的样式代码质量。

OK，以上就是本文的全部内容，如果你觉得还不错，欢迎转发，点赞，分享。

😉😊😇
🥰😍😘

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=11847

（本篇完）