[TOC] > [參考](https://www.zhangxinxu.com/jq/stylus/selectors.php) ## 使用`stylus` 編輯 ``` npm install stylus --save-dev npm install stylus-loader --save-dev ``` 在`..vue`文件中使用 ``` <style scoped lang="stylus" type="text/stylus"> #app .tab display:flex color:red </style> ```` 載入樣式 1. 在`*.vue` 中載入 ```$ <style scoped lang="stylus" type="stylesheet/stylus"> @import "./common/stylus/maxin.styl"; /*stylus的引入語法*/ </style> ``` 2. 在`*.js`中載入 ```$xslt import "./common/stylus/index.styl" ``` 3. 在`*.stylus` 中載入 ```$xslt @import "./base.styl" /*.styl 可省略*/ ``` ## 父級引用 & 字符`&`指向父選擇器 ``` textarea input color: #A7A7A7 &:hover color #000 //等同 textarea, input { color: #a7a7a7; } textarea:hover, input:hover { color: #000; } ``` ## 變量 ``` font-size = 14px font = font-size "Lucida Grande", Arial //font-size上述的變量 body font: font sans-serif ``` ## 同時支持 大括號的繼承 ``` body{ width:100% div{ width:80px } } ```