css预处理框架stylus——变量

在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;
}