建立好項目后我們來安裝stylus
npm install stylus stylus-loader --save-dev
這樣就安裝上了stylus。 接下來就可以使用了，使用方式分兩種。一種是在.vue文件的style塊中使用，一種是引用.styl文件的形式
一、選擇器
縮排（基於縮進代替大括號，空格代替冒號）當然按之前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)
二、變量
我們可以指定表達式為變量，然后在我們的樣式中貫穿使用。標識符（變量名，函數等），也可能包括$字符。
變量甚至可以組成一個表達式列表
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
三、插值
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)
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 */ }
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