[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 } } ```