stylus文档翻译 - 3.变量

变量

我们可能会定义一个变量,然后在样式中去使用它。

1
2
3
4
font-size = 14px
body
font font-siz Arial,sans-serif

编译为:

1
2
3
body{
font:14px Arial,sans-serif;
}

变量甚至可以组成表达式列表

1
2
3
4
5
font-size = 14px
font=font-size "Lucida Grande",Arial
body
font font,sans-serif

编译为:

1
2
3
body{
font:14px "Lucida Grande",Arial,sans-serif;
}

定义(变量名,函数等)可以包含$字符,如下面这个例子:

1
2
3
4
$font-size = 14px
body{
font:$font-size sans-serif;
}

查找属性

另一个Sytlus独有的很有意思的功能是能够不需要指定变量去直接引用属性。一个很好的例子是垂直和水平居中元素所需要的逻辑(通常用百分比和负边距,如下所示):

1
2
3
4
5
6
7
8
#logo
position:absolute
top:50%
left:50%
width:2=150px
height:h=80px
margin-left:-(w/2)
nargin-top:-(h/2)

我们使用@符号以及属性名就可以代替之前的wh:

1
2
3
4
5
6
7
8
#logo
position:absolute
top:50%
left:50%
width:150px
height:80px
margin-left:-(@width/2)
margin-top:-(@height/2)

另一中用是在已有的属性中有条件的定义属性值,下面这个例子我们应用一个当z-index未指定时z-index默认为1:

1
2
3
4
5
6
7
8
9
10
position()
position:arguments
z-index:1 unless @z-index
#logo
z-index:20
position:absolute
#logo2
position:absolute

属性查找才采取冒泡的方式向上查找直到找到或者到栈顶仍未找到返回null,在下面例子中color将被解析为blue:

1
2
3
4
5
6
7
body
color:red
ul
li
color:blue
a
background-color:@color