stylus使用文档总结：选择器+变量+插值+运算符+混合书写+方法

npm install stylus stylus-loader --save-dev

一、选择器

textarea, input
border 1px solid #eee
//新行
textarea
input
border 1px solid #eee

&

textarea

input

:hover

color

textarea
input
color #A7A7A7
&:hover
color #000

padding - n

unquote()

filter unquote('progid:DXImageTransform.Microsoft.BasicImage(rotation=1)')
//生成为：
filter progid:DXImageTransform.Microsoft.BasicImage(rotation=1)

二、变量

$

font-size = 14px
font = font-size "Lucida Grande", Arial
body
font font sans-serif
//编译为：
body {
font: 14px "Lucida Grande", Arial sans-serif;
}

#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)

null

@color

blue

body
color: red
ul
li
color: blue
a
background-color: @color

三、插值

{}

-webkit-{'border' + '-radius'}

-webkit-border-radius。

vendor(prop, args)
-webkit-{prop} args
-moz-{prop} args
{prop} args

border-radius()
vendor('border-radius', arguments)

box-shadow()
vendor('box-shadow', arguments)

button
border-radius 1px 2px / 3px 4px

//变身：
button {
-webkit-border-radius: 1px 2px / 3px 4px;
-moz-border-radius: 1px 2px / 3px 4px;
border-radius: 1px 2px / 3px 4px;
}

table
for row in 1 2 3 4 5
tr:nth-child({row})
height: 10px * row
//解析为
table tr:nth-child(1) {
height: 10px;
}
table tr:nth-child(2) {
height: 20px;
}
table tr:nth-child(3) {
height: 30px;
}
table tr:nth-child(4) {
height: 40px;
}
table tr:nth-child(5) {
height: 50px;
}

四、运算符

..

...

1..5    // => 1 2 3 4 5
1...5    // => 1 2 3 4

/

/

font: (14px/1.5);

true

0%

0px

true

0

false。

//true例子：
0%
0px
1px
-1
-1px
hey
'hey'
(0 0 0)
('' '')

//false例子：
0
null
false
''

//元组同样适用：
vals = (error 'one') (error 'two')
error in vals
// => false
(error 'one') in vals
// => true

pad(types = padding, n = 5px)
if padding in types
padding n
if margin in types
margin n

body
pad()

body
pad(margin)

body
pad(padding margin, 10px)
//对应于：
body {
padding: 5px;
}
body {
margin: 5px;
}
body {
padding: 10px;
margin: 10px;
}

?=

?:

is defined

color ?= white
color = color is defined ? color : white

is a，

15 is a 'unit'
// => true
#fff is a 'rgba'
// => true
15 is a 'rgba'
// => false
//另外，我们可以使用type()这个内置函数。
type(#fff) == 'rgba'
// => true
//注意：color是唯一的特殊情况，当左边是RGBA或者HSLA节点时，都为true.

foo is defined
// => false
foo = 15px
foo is defined
// => true
#fff is defined
// => 'invalid "is defined" check on non-variable #fff'

body
if ohnoes
padding 5px
//当未定义的时候，产生的是下面的CSS
body {
padding: 5px;
}
//显然，这不是我们想要的，如下书写就安全了：
body
if ohnoes is defined
padding 5px

#0e0 + #0e0
// => #0f0

#888 + 50%
// => #c3c3c3
#888 - 50%
// => #444

五、混合书写(Mixins)

/* Stylus 定义了一个名叫error的mixin，这个error设置了一个参数“$borderWidth”,在没特别定义外，这个参数的值是默认值2px */
error(borderWidth= 2px) {
border: borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
error(); /* 调用error mixins */
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
error(5px); /* 调用error mixins，并将参数$borderWidth的值指定为5px */
}

border-radius(n)

border-radius()

border-radius(n)
-webkit-border-radius n
-moz-border-radius n
border-radius n

form input[type=button]
border-radius(5px)
//编译为
form input[type=button] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

border-radius(n)
-webkit-border-radius n
-moz-border-radius n
border-radius n

form input[type=button]
border-radius 5px

border-radius

arguments

border-radius()
-webkit-border-radius arguments
-moz-border-radius arguments
border-radius arguments

border-radius 1px 2px / 3px 4px

&，

stripe(even, odd)

even

odd

background-color

tr

&

tr

even

stripe(even = #fff, odd = #eee)
tr
background-color odd
&.even
&:nth-child(even)
background-color even

//如果你愿意，你可以把stripe()当作属性调用。
stripe #fff #000

inline-list()
li
display inline

comma-list()
inline-list()
li
&:after
content ', '
&:last-child:after
content ''

ul
comma-list()

六、方法(Functions)

//很简单的例子，两数值相加的方法：
add(a, b)
a + b

//我们可以在特定条件下使用该方法，如在属性值中：
body
padding add(10px, 5)

//渲染：
body {
padding: 15px;
}

add(a, b = a)
a + b

add(10, 5)
// => 15
add(10)
// => 20

//下面就是一个有效赋值：
sizes = 15px 10px
sizes[0]
// => 15px

//类似的，我们可以在函数中返回多个值：
sizes()
15px 10px
sizes()[0]
// => 15px

add()

plus()

plus = add
plus(1, 2)
// => 3

invoke()

add()

sub()

invoke(a, b, fn)
fn(a, b)
add(a, b)
a + b
body
padding invoke(5, 10, add)
padding invoke(5, 10, sub)
//结果：
body {
padding: 15;
padding: -5;
}

arguments

sum()
n = 0
for num in arguments
n = n + num

sum(1,2,3,4,5)
// => 15

get(hash, key)

key

null

hash = (one 1) (two 2) (three 3)

get(hash, two)
// => 2
get(hash, three)
// => 3
get(hash, something)
// => null