cosine - 前端人の日常频道

#优质博文 #CSS #前端 #新特性
una.im | 5 Useful CSS functions using the new @function rule

AI 摘要：本文介绍了 CSS 新推出的 @function 规则，展示了如何通过自定义函数为样式表带来逻辑能力，使 CSS 更加动态、可维护，并提升设计系统的表达能力。作者通过五个实用案例（数值取反、透明度管理、流体排版、条件圆角、响应式侧边栏）以及一个 Bonus 案例（light-dark 主题切换函数），说明了现代 CSS 在逻辑处理和组件化方向上的巨大潜力，并展望了未来 @mixin 和 @apply 等特性的应用场景。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]
1. CSS @function 简介
• 新特性在 Chrome 139 中落地，允许编写自定义函数。
• 与 var() 的静态取值不同，@function 能处理逻辑与参数运算。
• 适合在 设计系统 (Design System) 场景下做动态样式抽象。

2. 五大示例函数
• Negation function：实现取反功能，可用于自动计算负值边距。
• Opacity function：将任意颜色与透明度参数结合，简化半透明色值生成。
• Fluid Typography function：在 clamp() 基础上提供更可读的语义化流体排版，允许不同文本类型按不同速率缩放。
• Conditional Radius function：在元素接近 viewport 边缘时移除圆角，避免布局异常，无需 media query。
• Responsive Sidebar function：根据屏幕宽度调整侧边栏宽度（默认 20ch），有效减少重复的媒体查询逻辑。

3. Bonus：Light-Dark Theme Function
• 扩展原生 light-dark() 的适用范围，不仅局限于颜色，还能应用到边框样式、字体粗细等。
• 结合 if()、:scope、style() 查询与 @function，实现更强大的主题自定义能力。

4. 未来展望
• CSS Functions and Mixins Draft Spec 将继续发展，未来的 @mixin 与 @apply 将支持输出多条样式规则。
• 可以构建类似 utils.css 的工具库，与 reset.css、utils.js 类似，让 CSS 工程化更完善。

author Una Kravets

Una.im

5 Useful CSS functions using the new @function rule

CSS custom functions are a gamechanger. Here are 5 really useful examples.

www.tgoop.com/cosine_front_end/2856

218 viewsSep 6 at 13:49

#优质博文 #CSS #前端 #新特性
una.im | 5 Useful CSS functions using the new @function rule

AI 摘要：本文介绍了 CSS 新推出的 @function 规则，展示了如何通过自定义函数为样式表带来逻辑能力，使 CSS 更加动态、可维护，并提升设计系统的表达能力。作者通过五个实用案例（数值取反、透明度管理、流体排版、条件圆角、响应式侧边栏）以及一个 Bonus 案例（light-dark 主题切换函数），说明了现代 CSS 在逻辑处理和组件化方向上的巨大潜力，并展望了未来 @mixin 和 @apply 等特性的应用场景。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]
1. CSS @function 简介
• 新特性在 Chrome 139 中落地，允许编写自定义函数。
• 与 var() 的静态取值不同，@function 能处理逻辑与参数运算。
• 适合在 设计系统 (Design System) 场景下做动态样式抽象。

2. 五大示例函数
• Negation function：实现取反功能，可用于自动计算负值边距。
• Opacity function：将任意颜色与透明度参数结合，简化半透明色值生成。
• Fluid Typography function：在 clamp() 基础上提供更可读的语义化流体排版，允许不同文本类型按不同速率缩放。
• Conditional Radius function：在元素接近 viewport 边缘时移除圆角，避免布局异常，无需 media query。
• Responsive Sidebar function：根据屏幕宽度调整侧边栏宽度（默认 20ch），有效减少重复的媒体查询逻辑。

3. Bonus：Light-Dark Theme Function
• 扩展原生 light-dark() 的适用范围，不仅局限于颜色，还能应用到边框样式、字体粗细等。
• 结合 if()、:scope、style() 查询与 @function，实现更强大的主题自定义能力。

4. 未来展望
• CSS Functions and Mixins Draft Spec 将继续发展，未来的 @mixin 与 @apply 将支持输出多条样式规则。
• 可以构建类似 utils.css 的工具库，与 reset.css、utils.js 类似，让 CSS 工程化更完善。

BY cosine - 前端人の日常频道