CSS 变量的用法

更新日期: 2020-10-12 阅读次数: 86 字数: 203 分类: CSS

在查看小程序 UI 库 ColorUI 时,看到这样一段代码:

.bg-gradual-red {
    background-image: var(--gradualRed);
    color: var(--white);
}

查了一下 css 中 var 的用法,才知道原来 CSS3 中已经支持 CSS 变量这种用法了。不需要再依赖 SASS 和 LESS 也能使用变量,非常棒。

CSS 变量用法

要点:

  • 变量名必须以双横杠开头
  • 变量需要定义在一个 css selector 中,用于限制其作用域。如果想全局使用,网页中使用 :root 或者 body;小程序中使用 Page。
  • 使用时,var(变量名, 默认值)。默认值非必填,主要是为了防止变量值不合法。

哪些适合定义为 CSS 变量

  • 常用字号
  • 常用颜色

变量是否能覆盖

同样式一样,权重高的 selector 覆盖权重低的 selector。

参考

https://www.w3schools.com/css/css3_variables.asp

领取阿里云/腾讯云服务器优惠券

关于作者

我是来自山东烟台的一名开发者,喜欢瞎折腾,顺便记记笔记。有敢兴趣的话题,欢迎加微信 zhongwei 聊聊, 查看更多联系方式。 白天写程序,晚上哄熊孩子,可能回复有点慢,见谅。同时也欢迎关注我的微信公众号“大象工具”: 大象工具微信公众号

相关文章

爱评论不评论

近期节日

2020年10月31日 世界勤俭日
2020年11月01日 万圣节
2020年11月07日 立冬
2020年11月08日 中国记者日
2020年11月10日 世界青年节
2020年11月11日 光棍节
2020年11月14日 世界糖尿病日
2020年11月17日 国际大学生节
2020年11月20日 国际儿童日
2020年11月21日 世界问候日
2020年11月22日 小雪
2020年11月26日 感恩节
查看更多节日