CSS 变量是 CSS 引入的一个新特性,目前绝大多数浏览器已经支持了,它可以帮助我们用更少的代码写出同样多的样式,大大提高了工作效率,本篇文章将教你如何使用 CSS 变量(css variable)。
CSS中原生的变量定义语法是:--*
,变量使用语法是:var(--*)
,其中*
表示变量名称
变量声明
使用 :root 来声明 css 变量,root 相当于根元素 html,例如声明一个背景颜色为红色的 red 变量,示例如下
:root{ --red: #f00;}
如何应用这个变量呢?使用 var() 函数。
div{ background-color: var(--red);}
这样,我们就给一个 div 盒子添加了一个属性,即设置它的背景颜色为红色。当然也可以同时定义多个变量,方便使用,注意:变量名对大小写敏感,nav-color 和 Nav-color 是完全不同的变量。
:root{ --margin-top: 20px; --nav-color: #ff0; --Nav-color: #fff; --transition-duration: .5s;}
全局变量与局部变量
前面我们在 :root里声明的变量都属于全局变量,也就是可以在 html 包裹下的任一class,id 都可以使用它;除此之外也可以定义局部变量,例如我们在 class 为 left 的 div 下定义局部变量:
.left{ --left-margin: 60px; --left-background-color: #333;}
这个时候,--left-margin 和 --left-background-color 就只能在 .left 包含下的容器才能使用这两个属性,同样是使用margin:var(--left-margin);
来书写。
JavaScript 操作变量
JavaScript 可以操纵 css 变量,例如在 index.js 文件中有如下代码:
var root = document.querySelector(‘:root‘); //获取根元素var rootStyle = getComputedStyle(root); //获取元素的 cssvar red = rootStyle.getPropertyValue(‘--left-margin‘); //获取 css 的样式值 60pxroot.style.setProperty(‘--left-margin‘,‘50px‘); //更改样式
响应式布局
由于事先定义好了变量,只需引入就可以使用,这样的话当我们想要修改一个属性值,例如修改某个盒子的背景颜色,只需更改变量的值,就可以全局应用到所有元素中,利用这一特性可以做响应式布局。
:root{ --bg-color: #fff; --height: 1080px;}body{ background-color: var(--bg-color); height: var(--height);}@media all and (max-width:450px) { :root{ --bg-color: #000; --height: auto; }}
上面的代码表示正常宽度下的 body 背景颜色为白色,高度为 1080 像素,而当宽度为 450px 大小的时候,此时 body 的背景颜色就变为了黑色,高度也变成自适应,只需要更改变量的值就可以实现响应,是不是很方便呢?
原文地址:https://www.cnblogs.com/cwxwdm/p/10573966.html