Stylus安装及使用

1、简介

Stylus是一个CSS预处理器，在VUE项目中一般使用Stylus就足够了，Sass预处理器的node-sass包比较多坑。

2、安装与页面引入

（1）在命令行中依次执行如下命令进行安装

npm install stylus --save
npm install stylus-loader --save

（2）在style标签中添加lang属性，例：

<style lang="stylus"></style>

3、Stylus语法特点

（1）括号可有可无

.hellocolor: red;
buttonbackground:blue;

（2）分号可有可无

.hellocolor: red
buttonbackground: blue

（3）冒号可有可无（注意需要在属性和属性值之间添加空格）

.hellocolor red
buttonbackground blue

4、书写选择器需要注意的内容

（1）缩排
Stylus的语法基于缩进，空格也有重要的意义，如下：

编译前

.boxpbackground blue

编译后

.box p {background: blue
}

说明：.box与p标签是父子级关系，所以p标签的书写要在box的下一行添加空格。

（2）规则
Stylus就跟CSS一样，允许你使用逗号为多个选择器同时定义属性，如下：

编译前

button,inputbackground blue

编译后

button,input {background: blue;
}

（3）父级引用：字符&指向父选择器
如下这个例子，两个选择器在:hover伪类选择器上都改变了color值

编译前

button,inputbackground blue&:hovercolor green

编译后

button,input {background: blue;
}
button:hover,input:hover {color: green;
}

5、变量

我们可以指定表达式为变量，在大量使用该样式的时候调用该变量

编译前

font-size = 50px
divfont font-size '宋体'

编译后

div {font: 50px(引用了变量) '宋体'；

变量甚至可以组成一个表达式：

编译前

font-size = 50px
font-style = font-size '隶书'
divfont font-style

编译后

div {font: 50px '隶书'
}

6、方法（扩展）

Stylus还可以使用一些自己定义的方法

编译前

// 定义方法
add(a, b)a + b
div// 调用方法padding add(20px, 30px)

编译后

div {padding: 50px;
}

7、混合书写

混合书写和函数定义方法一致，但是应用上还是不同的。

编译前

error(borderWidth= 2px) {border borderWidth solid #F00color #F00
}
div// 不传递参数调用方法error()p// 传递参数调用方法error(10px)

说明：这里定义了一个名叫error的方法，这个error设置了一个参数borderWidth，在没特别定义外，这个参数的值默认是2px

编译后

div {border: 2px solid #F00;color: #F00;
}
div p {border: 10px solid #F00;color: #F00;
}