CSS自定义函数也来了

CSS 预处理语言如 Sass 和 Less 长期以来一直提供自定义函数的功能,而现在,原生 CSS 也通过 @function 规则加入了这一强大特性。下面简单介绍一下

什么是 CSS @function?

CSS @function 是 CSS 的一个新特性,允许开发者定义可重用的计算逻辑,这些函数可以接受参数并返回值。这与 JavaScript 中的函数概念类似,但完全在 CSS 环境中运行。

css 复制代码
@function 函数名(参数1, 参数2, ...) {
  /* 计算逻辑 */
  result: 返回值; 
}

简单示例

使用函数确定边框样式

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @function --border(--color: red) {
      result: 1px solid var(--color);
    }

    div {
      width: 100px;
      height: 40px;
      border: --border();
    }
  </style>
</head>

<body>
  <div></div>
</body>

</html>

运行效果如下

条件样式

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @function --border(--color: red) {
      result: 1px solid var(--color);

      @media (width > 600px) {
        result: 2px dashed var(--color);
      }
    }

    div {
      width: 100px;
      height: 40px;
      border: --border();
    }
  </style>
</head>

<body>
  <div></div>
</body>

</html>

需要把条件样式放在后面,不然样式覆盖了。可以认为result就是一个存储函数返回值的变量,函数执行完后,会把result的值返回


现在,我们可以在CSS中使用@function来定义一个函数,但是现在浏览器兼容性还不好,在chrome浏览器需要启用实验性的CSS功能。 在chrome浏览器中,可以通过以下步骤启用实验性的CSS功能:

  1. 打开chrome://flags 页面。
  2. 搜索 Experimental Web Platform features 并启用它。
相关推荐
用户38022585982410 分钟前
vue3源码解析:响应式机制
前端·vue.js
bo5210011 分钟前
浏览器渲染机制详解(包含渲染流程、树结构、异步js)
前端·面试·浏览器
普通程序员18 分钟前
Gemini CLI 新手安装与使用指南
前端·人工智能·后端
山有木兮木有枝_20 分钟前
react受控模式和非受控模式(日历的实现)
前端·javascript·react.js
流口水的兔子21 分钟前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序
多啦C梦a25 分钟前
🪄 用 React 玩转「图片识词 + 语音 TTS」:月影大佬的 AI 英语私教是怎么炼成的?
前端·react.js
呆呆的心25 分钟前
大厂面试官都在问的 WEUI Uploader,源码里藏了多少干货?🤔
前端·微信·面试
heartmoonq26 分钟前
深入理解 Vue 3 响应式系统原理:Proxy、Track 与 Trigger 的协奏曲
前端
独立开阀者_FwtCoder1 小时前
放弃 JSON.parse(JSON.stringify()) 吧!试试现代深拷贝!
前端·javascript·github
爱喝水的小周2 小时前
AJAX vs axios vs fetch
前端·javascript·ajax