• 用CSS的@property 定义变量


    1.以前定义变量

    1. :root {
    2. --whiteColor: #fff;
    3. }
    4. p {
    5. color: (--whiteColor);
    6. }

    2.@property定义变量

    简单解读下:

    • @property --property-name 中的 --property-name 就是自定义属性的名称,定义后可在 CSS 中通过 var(--property-name) 进行引用
    • syntax:该自定义属性的语法规则,也可以理解为表示定义的自定义属性的类型
    • inherits:是否允许继承
    • initial-value:初始值

    其中,@property 规则中的 syntax 和 inherits 描述符是必需的。

    支持的 syntax 语法类型

    syntax 支持的语法类型非常丰富,基本涵盖了所有你能想到的类型。

    • length
    • number
    • percentage
    • length-percentage
    • color
    • image
    • url
    • integer
    • angle
    • time
    • resolution
    • transform-list
    • transform-function
    • custom-ident (a custom identifier string)

    syntax 中的 +#| 符号

    定义的 CSS @property 变量的 syntax 语法接受一些特殊的类型定义。

    • syntax: '' :接受逗号分隔的颜色值列表
    • syntax: '' :接受以空格分隔的长度值列表
    • syntax: '':接受单个长度或者以空格分隔的长度值列表

    OK,铺垫了这么多,那么为什么要使用这么麻烦的语法定义 CSS 自定义属性呢?CSS Houdini 定义的自定义变量的优势在哪里?下面我们一一娓娓道来。

    1. @property --houdini-colorA {
    2. syntax: '';
    3. inherits: false;
    4. initial-value: #fff;
    5. }
    6. @property --houdini-colorB {
    7. syntax: '';
    8. inherits: false;
    9. initial-value: #000;
    10. }
    11. .property {
    12. background: linear-gradient(45deg, var(--houdini-colorA), var(--houdini-colorB));
    13. transition: 1s --houdini-colorA, 1s --houdini-colorB;
    14. &:hover {
    15. --houdini-colorA: yellowgreen;
    16. --houdini-colorB: deeppink;
    17. }
    18. }

  • 相关阅读:
    day5ARM
    使用 Redis BitMap 实现签到与查询历史签到以及签到统计功能(SpringBoot环境)
    【系统性学习】Linux Shell常用命令
    java.lang.ClassNotFoundException: com.mysql.cj.jdbc.Driver解决方案
    重学设计模式(三、设计模式-备忘录模式)
    好消息!微信小程序开发环境自带vConsole
    FS380R12A6T4LBBPSA1 1200V 380A 六单元 汽车IGBT模块
    全球农业经济论坛 丰收节贸促会-万祥军:产业链解决中国方案
    半监督学习在恶意软件流量检测中的应用
    29.单链表的C语言完整实现
  • 原文地址:https://blog.csdn.net/qq_52421092/article/details/126162819