css中颜色使用变量，stylus的使用

1.stylus是一个很强大的css工具，他可以让css使用变量，我可以自定义一个颜色的变量表，例如下面这样子

//主色调-蓝色

$color-main=#2b85e4

// 绿色

$color-success =#67C23A

// 橙色

$color-waring =#E6A23C

//粉红

$color-pink=#F56C6C

//红色

$color-error=#ed4014

//标题

$color-title=#17233d

//正文

$color-content=#515a6e

//辅助-图标

$color-sub=#808695

这样子做的好处就是当你需要改变配色的时候，不需要所有页面去逐个修改颜色，而是直接打开这个颜色表进行修改即可

2.按照网上的教程，先安装stylus

npm install stylus --save

然后在根目录下新建一个stylus文件夹

stylus用来存放styl文件

3.右键stylus文件夹，新建一个styl格式的文件，名字随意，我的取名就color.styl

新建样式文件

选择Stylus File

4.在你需要的页面中进行引入这个样式文件，在color.styl中写入上面提供的配色变量表

@import '../stylus/color.styl'

5.npm run dev之后，你会发现还是不行，因为很多网上的教程还少了一步，那就是安装stylus-loader,它就像是一个编译器一样，然后你就会发现可以使用stylus了

npm install stylus-loader --save

6.比如background-color:#2b85e4,你直接写成background-color:$color-main就可以了

7.最后，其实stylus的功能远远不止这些，你可以通过看官方文档进行进一步的学习，http://stylus-lang.com/