stylus
最后更新于：2022-04-02 03:18:21
[TOC]
> [参考](https://www.zhangxinxu.com/jq/stylus/selectors.php)
## 使用`stylus` 编辑
```
npm install stylus --save-dev
npm install stylus-loader --save-dev
```
在`..vue`文件中使用
```
````
载入样式
1. 在`*.vue` 中载入
```$
```
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
}
}
```
';