有没有使用过 css variable,它解决了哪些问题?

本文阅读 1 分钟
首页 前端笔记 正文

css 变量减少样式重复定义,比如同一个颜色值要在多个地方重复使用,以前通过 less 和 sass 预处理做到,现在 css 变量也可以做到,方便维护,提高可读性

:root{
  --bgcolor: blue;
  --color: red;
}
p {
  color: var(--color);
}
div {
  backgroung-color: var(--bgcolor);
  color: var(--color)
}

在媒体查询中使用,精简代码,减少冗余

.box {
  --base-size: 10;
  width: calc(var(--base-size)* 10px);
  height: clac(var(--base-size)* 5px);
  padding:calc(var(--base-size) * 1px);
}
@media screen and (min-width: 1480px) {
  .box{
    --base-size: 8;
  }
}

方便在 js 中使用

// 设置变量
document.getElementById("box").style.setPropertyValue('--color', 'pink')
// 读取变量
doucment.getElementById('box').style.getPropertyValue('--color').trim()    //pink
// 删除变量
document.getElementById('box').style.removeProperty('--color')
解压密码: detechn或detechn.com

免责声明

本站所有资源出自互联网收集整理,本站不参与制作,如果侵犯了您的合法权益,请联系本站我们会及时删除。

本站发布资源来源于互联网,可能存在水印或者引流等信息,请用户自行鉴别,做一个有主见和判断力的用户。

本站资源仅供研究、学习交流之用,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担。

如何实现一个 loading 动画,可用 css 或 svg
« 上一篇 05-29
简述下 css specificity
下一篇 » 05-29

发表评论