什么?CSS还自带变量功能?

以往,要在CSS中使用“改一点点,全局生效”的变量功能,要么用SCSS、LESS,要么写个脚本生成文件。但实际上,新一点的CSS标准已经自带变量功能。

先看看其它的实现方式

LESS

@main-color: #525f7f;

span {
  color: @main-color;
}

这种方式没有什么问题,但页面需要加载额外加载项,比较耗资源。(SCSS同样)

脚本

main_color = '#525f7f'

css = open('style.css', 'w', encoding='utf-8')
css.write(f'''span {{
    color: {main_color};
}}''')

这种方式需要本地编译脚本,同时兼顾脚本语言和CSS规则,还繁琐。

再看看自带的实现方式

:root {
    --main-color: #525f7f;
}

span {
    color: var(--main-color);
}

定义变量需要统一在:root里用--定义,使用var(--[变量名])调用变量。由于是自带的,所以不需要作额外处理,直接上即可。

目前这种方式已经普及,很多网站都在使用。

在没有特别声明的情况下,内容均为原创,请遵守CC BY-NC-SA 4.0版权协议!

评论

  1. 鱼荷
    2 周前
    2024-7-05 23:48:28

    这个语法早就有了,而且不一定要声明在:root里,声明在选择器里也是可以的,css变量在tailwind这种原子化css的实现里很常见,比如shadow-xl shadow-black这两个class要起作用就必需要用的css变量

发送评论 编辑评论

注意事项:
  1. 请遵守法律,友善发言。
  2. 评论被回复后没有提醒,请自行关注,敬请见谅。
  3. 无关的内容请移步留言板。
  4. 支持Markdown,可以使用第三方图床插入图片。

				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
呼呼
上一篇
下一篇