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）括号可有可无

.hello
	color: red;
button
	background:blue;

（2）分号可有可无

.hello
	color: red
button
	background: blue

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

.hello
	color red
button
	background blue

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

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

• 编译前

.box
	p
		background blue

• 编译后

.box p {
	background: blue
}

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

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

• 编译前

button,input
	background blue

• 编译后

button,input {
	background: blue;
}

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

• 编译前

button,input
	background blue
	&:hover
		color green

• 编译后

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

5、变量

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

• 编译前

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

• 编译后

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

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

• 编译前

font-size = 50px
font-style = font-size '隶书'
div
	font 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 #F00
	color #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;
}