stylus和less、sass一样都是css预编译工具，在项目中使用stylus，是我们的css更加灵活。具体的安装步骤比较简单，在这儿就不表了，主要说一下怎么使用变量及书写逻辑。
一、创建全局stylus变量
新建一个.styl后缀的文件，在文件里面新建需要的变量
// 背景颜色变量
$chinaWineColor = linear-gradient(-90deg, #fd564f, #fe5850)
$commonColor = linear-gradient(90deg, #5fbfff, #3b97ff)
二、在项目上注册使用全局变量
这个地方有两种方案，一种是直接注册在全局，任何模块都可以直接使用，还有一种是模块里面引入。
（一）、全局使用，在vue.config.js文件上修改一下
css: {
loaderOptions: {
stylus: {
// @/ 是 src/ 的别名，想配的话可以alias上配
import: '~@/assets/var.styl'
}
}
},
（二）、模块使用
@import '~@/assets/var.styl'//使用前需要导入。
三、使用全局变量
(一)如果只是使用全局变量不涉及逻辑可以直接这么写
.title
color $commonColor
(二)如果需要通过参数控制颜色，个人建议使用:class来使用
** HTML：**
<md-button class="btn-confirm" :class="isShowRecored?'common':'chinaWine'" type="primary" plain @click="makeSure">确认</md-button>
**mounted**：
getDisplayMode() === 'CHINAWINE_SALES' ? this.isShowRecored = false : this.isShowRecored = true
**style：**
&.chinaWine
background $chinaWineColor!important
&.common
background $commonColor!important
