• 域名认证
  • 作品:144
  • 案例:19|
  • 教程:5499|
  • 资讯:147|
  • 资源:322|
  • 总访问量:482472|

导航菜单
酷讯网络工作室_源码交易平台,源码商城,网站定制开发,免费模版下载,网络技术服务,微信应用开发,小程序开发,贵州网络技术欢迎你.
CSS自定义变量方法

CSS自定义变量方法

浏览次数:

作者: 淡淡的风

信息来源: 本站原创

更新日期: 2020-09-28 12:15:52

文章简介

今天找模板看到一个模板这段代码,很好奇,研究了下,分享给大家学习。:root { --blue: #0e0620; --white: #fff; --green:

  • 正文开始

今天找模板看到一个模板这段代码,很好奇,研究了下,分享给大家学习。

:root {
  --blue: #0e0620;
  --white: #fff;
  --green: #2ccf6d;
}
body {
  color: var(--blue);
}

这段是CSS3的自定义变量的写法,搞了前端这么多年,还没遇到过,以前只知道LESS SASS支持变量,没想到CSS都可以直接使用CSS变量了。

方法很简单,跟JS一样,先声明一个变量。

:root {
  --blue: #0e0620;
}

然后下面的代码中可以重复使用

body {
  color: var(--blue);
}

这种样式可以用在批量换模板风格颜色非常方便,只要改一个地方全部都改了。

标签 CSS语法CSS教程
收藏此文 ( ) 打赏本站

如果本文对你有所帮助请打赏本站

  • 打赏方法如下:
  • 支付宝打赏
    支付宝扫描打赏
    微信打赏
    微信扫描打赏

精彩评论