CSS变量

时间：2019-11-20 13:55:41 阅读：68 评论：0 收藏：0 [点我收藏+]

一、基础变量

css也支持变量哦，把需要更改的地方设置成变量，一处设置，多处改变。

请看栗子：
通过--variableName创建样式变量，
使用var(--variableName)调用变量。
备用值
var(--variableName,defaultValue)：

.className {
    --colorValue:gray
}
.className2 {
    color: var(--colorValue, red);
}
.className3 {
    color: var(--colorValue);
}

什么是层级变量？
你创建的变量不仅可以在你声明的变量里面使用，也可以在该元素的子元素里使用。
:root它就好像是html是body的容器一样，
:root 在它里面创建的变量，整个网页都生效。

 :root {
    --colorValue:pink;
  }

:root里面定义的变量的作用域是作用于整个页面的，如果元素里也创建了相同的变量，则会把它给覆盖掉。

例子：将变量原来的颜色改为黑色

.className {
    --colorValue:black;
}

当屏幕的宽度小于等于350px的时候，
--colorValue的值会被改变为red，那么应用了该变量的元素的样式则会发生响应式修改

 @media (max-width: 350px) {
    :root {
     --colorValue:red;
    }
  }

原文：https://www.cnblogs.com/lchsirblog/p/11897161.html

踩

(0)

评论一句话评论（0）

分享档案

更多>