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

　　创建好项目后咱们来安装stylus

npm install stylus stylus-loader --save-dev

　　这样就安装上了stylus。 接下来就可使用了，使用方式分两种。一种是在.vue文件的style块中使用，一种是引用.styl文件的形式

1、选择器

　　缩排（基于缩进代替大括号，空格代替冒号）固然按以前css写也是能够的

　　规则集：使用逗号为多个选择器同时定义属性，使用新行也是同样的效果

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的表达式可能既被解释成减法运算，也可能被释义成一元负号属性。为了不这种歧义，用括号包裹表达式。

　　有Stylus没法处理的属性值？unquote()能够帮你：

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

2、变量

　　咱们能够指定表达式为变量，而后在咱们的样式中贯穿使用。标识符（变量名，函数等），也可能包括$字符。

　　变量甚至能够组成一个表达式列表

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

　　Stylus有另一个很酷的独特功能，不须要分配值给变量就能够定义引用属性。下面是个很好的例子，元素水平垂直居中对齐（典型的方法是使用百分比和margin负值），以下：

#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

3、插值

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

4、运算符

　　提供包含界线操做符(..)和范围操做符(...)

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

5、混合书写(Mixins)

　　Mixins是预处器中的函数。平时你在写样式时确定有碰到过，某段CSS样式常常要用到多个元素中，这样你就须要重复的写屡次。在CSS预处器中，你能够为这些公用的CSS样式定义一个Mixin，而后在你CSS须要使用这些样式的地方，直接调用你定义好的Mixin。这是一个很是有用的特性。Mixins是一个公认的选择器，还能够在Mixins中定义变量或者是默认参数。能够不使用任何符号，就是直接定义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)方法，其却做为一个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!

二、父级引用

　　混合书写能够利用父级引用字符&，继承父业而不是本身筑巢。例如，咱们要用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()

6、方法(Functions)

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

二、返回值：

//很简单的例子，两数值相加的方法：
add(a, b) a + b //咱们能够在特定条件下使用该方法，如在属性值中：
body padding add(10px, 5) //渲染：
body { padding: 15px; }

三、默认参数：可选参数每每有个默认的给定表达。在Stylus中，咱们甚至能够超越默认参数。

add(a, b = a) a + b add(10, 5) // => 15
add(10) // => 20

四、多个返回值：Stylus的函数能够返回多个值，就像你给变量赋多个值同样。

//下面就是一个有效赋值：
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