在css中使用变量可以说极大提高了css代码的复用性、可维护性、灵活性!!
1、变量:
官方文档:我们可以把表达式指定为变量,然后在样式中使用(在实际开发中通常会把可复用的样式单独写在一个以点 . styl 的文件中,stylus变量通常前边加上$符,当然变量名是自定义的!):
//指定变量,stylus中注释与js一样 使用//
$color=blue
$font-size=30px
.box
color:$color
font-size:$font
编译的结果为:
.box{
color:blue;
font-size:30px;
}
2、一组变量的使用:
如果你想把一组变量同时定义在样式中,可以这样写 ( 变量名也是自定义的 )
varible()
width:100px
height:100px
background:red
color:blue
.box
varible()
编译结果为:
.box{
width:100px;
height:100px;
background:red;
color:blue;
}