变量
我们可以将表达式赋值给变量,然后在整个样式表中使用变量:
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;
}
We can not use null to create empty variable, but parentheses ()
can do that:
empty = ()
body {
font: empty sans-serif;
}
//Compiles to:
body {
font: sans-serif;
}
属性查找
Stylus 的另外一个很酷的独特功能是不需要分配值给变量就可以定义引用属性。下面是个很好的例子,元素水平垂直居中对齐(典型的方法是使用百分比和 margin 负值,如下): Another cool feature unique to Stylus is the ability to reference properties defined without assigning their values to variables. A great example of this is the logic required for vertically and horizontally center an element (typically done using percentages and negative margins, as follows):
#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)
另外使用案例是基于其他属性有条件地定义属性。在下面这个例子中,我们默认指定z-index值为1,但是,只有在z-index之前未指定的时候才这样:
Another use-case is conditionally defining properties within mixins based on the existence of others . In the following example, we apply a default z-index
of 1
—but only if z-index
was not previously specified:
position()
position: arguments
z-index: 1 unless @z-index
#logo
z-index: 20
position: absolute
#logo2
position: absolute
属性会“向上冒泡”查找堆栈直到被发现,或者返回null(如果属性搞不定)。下面这个例子,@color被弄成了blue.
Property lookup will “bubble up” the stack until found, or return null
if the property cannot be resolved. In the following example, @color
will resolve to blue
:
body
color: red
ul
li
color: blue
a
background-color: @color