变量
我们可以将表达式赋值给变量,并在整个样式表中使用它们:
font-size = 14px
body
font font-size Arial, sans-serif
//编译为:
body {
font: 14px Arial, sans-serif;
}
变量甚至可以由表达式列表组成:
font-size = 14px
font-stack = "Lucida Grande", Arial, sans-serif
body
font font-size font-stack
//编译为:
body {
font: 14px "Lucida Grande", Arial, sans-serif;
}
标识符(变量名、函数等)也可以包括 $
字符。例如:
$font-size = 14px
body {
font: $font-size sans-serif;
}
我们不能使用 null 创建空变量,但是括号 ()
可以做到:
empty = ()
body {
font: empty sans-serif;
}
编译为:
body {
font: sans-serif;
}
属性查找
Stylus 的另一个独特功能是能够引用未将其值分配给变量的属性。一个很好的例子是垂直和水平居中元素所需的逻辑(通常使用百分比和负边距完成,如下所示):
#logo
position: absolute
top: 50%
left: 50%
width: w = 150px
height: h = 80px
margin-left: -(w / 2)
margin-top: -(h / 2)
我们可以简单地在属性名称前加上 @
字符来访问值,而不是分配变量 w
和 h
:
#logo
position: absolute
top: 50%
left: 50%
width: 150px
height: 80px
margin-left: -(@width / 2)
margin-top: -(@height / 2)
另一个用例是根据其他属性的存在条件地在 mixin 中定义属性。在下面的示例中,我们应用默认的 z-index
为 1
,但仅当之前未指定 z-index
时:
position()
position: arguments
z-index: 1 unless @z-index
#logo
z-index: 20
position: absolute
#logo2
position: absolute
属性查找将“冒泡”到堆栈中找到,或者如果无法解析属性,则返回 null
。在下面的示例中,@color
将解析为 blue
:
body
color: red
ul
li
color: blue
a
background-color: @color