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