stylus usage documentation summary: selector + variable + interpolation + operator + mixed writing + method

1. Selector

　　Indentation ( based on indentation instead of curly brackets, spaces instead of colons ) of course, it is also possible to write according to the previous css

　　Rule Set: Use commas to define properties for multiple selectors at the same time, using newlines also has the same effect

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

　　Parent reference: The character &points to the parent selector . Here's an example where our two selectors ( textareaand input) both change values ​​on the :hoverpseudo-class selectorcolor

textarea
input
  color #A7A7A7
  &:hover
    color #000

　　Disambiguation: Similar padding - nexpressions may be interpreted as both a subtraction operation and as a unary minus attribute. To avoid this ambiguity, wrap expressions in parentheses .

　　Have property values ​​that Stylus can't handle? unquote()Can help you:

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

2. Variables

　　We can specify expressions as variables and use them throughout our styles . Identifiers (variable names, functions, etc.), may also include $characters.

　　Variables can even form a list of expressions

font-size = 14px
font = font-size "Lucida Grande", Arial
body
  font font sans - serif
 // compiles to:
body {
  font: 14px "Lucida Grande", Arial sans-serif;
}

　　Stylus has another cool unique feature that allows you to define reference properties without assigning values ​​to variables. Here's a good example of aligning elements horizontally and vertically (typically 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)

　　Instead of using the variable wsum here h, we simply prepend @the character to the property name to access the value corresponding to that property name :

#logo
  position: absolute
  top: 50%
  left: 50%
  width: 150px
  height: 80px
  margin-left: -(@width / 2)
  margin-top: -(@height / 2)

　　The property will "bubble up" the stack until it is found , or returnnullif the property can't figure it out. The following example@colorwas madeblue.

body
  color: red
  the
    at the
      color: blue
      a
        background-color: @color

三、插值

　　Stylus支持通过使用{}字符包围表达式来插入值，其会变成标识符的一部分。例如，-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;
}

　　选择器插值：插值也可以在选择器上起作用。例如，我们可以指定表格前5行的高度，

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

　　真与假：Stylus近乎一切都是true，包括有后缀的单位，甚至0%、0px等都被认作true。不过，0在算术上本身是false。表达式（或“列表”）长度大于1被认为是真。

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

//false例子：
0 
null
false
''

　　存在操作符in：检查左边内容是否在右边的表达式中。

//元组同样适用：
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：Stylus提供一个二元运算符叫做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.

　　变量定义：is defined：此伪二元运算符右边空荡荡，左边无计算。用来检查变量是否已经分配了值。

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

　　颜色操作：颜色操作提供了一个简洁，富有表现力的方式来改变其组成。例如，我们可以对每个RGB：

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

　　另外一个例子是通过增加或减少百分值调整颜色亮度。颜色亮，加；暗，则减。

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

五、混合书写(Mixins)

1、混入

　　混入和函数定义方法一致，但是应用却大相径庭。例如，下面有定义的border-radius(n)方法，其却作为一个mixin（如，作为状态调用，而非表达式）调用。当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!

2、父级引用

　　混合书写可以利用父级引用字符&，继承父业而不是自己筑巢。例如，我们要用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

3、混合书写中的混合书写

　　自然，混合书写可以利用其它混合书写，建立在它们自己的属性和选择器上。

inline-list()
  li
    display inline

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

ul
  comma-list()

六、方法(Functions)

1、函数：Stylus强大之处就在于其内置的语言函数定义。其定义与混入(mixins)一致；却可以返回值。

2、返回值：

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

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

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

3、默认参数：可选参数往往有个默认的给定表达。在Stylus中，我们甚至可以超越默认参数。

add(a, b = a)
  a + b

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

4、多个返回值：Stylus的函数可以返回多个值，就像你给变量赋多个值一样。

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

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

5、别名：给函数起个别名，很简单，直接等于就可以了。例如上面的add()弄个别名plus(), 如下：

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

6、变量函数：我们可以把函数当作变量传递到新的函数中。例如，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;
}

7、参数：arguments是所有函数体都有的局部变量，包含传递的所有参数。

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

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

8、哈希示例：下面，我们定义get(hash, key)方法，用来返回key值或null。我们遍历每个键值对，如果键值匹配，返回对应的值。

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

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