【stylus】css预处理器stylus的安装以及简单用法

前言：stylus和sass、less同为css预处理器。css预处理器是：你用“我的”语法来写，更简单，更强大，最后我帮你编译成css文件。说实话，之前我没用过css预处理器，stylus是接触的第一个，确实比写css要简洁，而且可以用变量，函数…（其他方面等我用到再来更新）

 如何在项目中应用？

1、安装

$ npm install stylus -g

2、设置 lang='stylus'

<style  scoped lang="stylus">

</style>

3、OK，可以用stylus来设置样式了。

4、stylus的一些简单用法（语法和css还是很接近的）

（1）括号可省、冒号可省、分号可省

body
  font-size 12px
//--相当于
body{
  font-size:12px;
}

(2)换行缩进代表层级（.box span）

.box
  span
    color #000
    font-size 16px
//相当于
.box span{
  color:#000; 
  font-size:16px;
}

（3）同时定义属性可以用逗号或者换行(.box,.main)

.box,.main
  border 1px solid #ccc
//或者
.box
.main
  border 1px solid #ccc
//相当于
.box,
.main{
  border:1px solid #ccc;
}

(4)父级引用(.box:hover 或者 .box::before)

.box
  background #f1f1f1
  span
    font-size 12px
  &:hover
    color red

//相当于
.box {
  background: #f1f1f1;
}
.box span {
  font-size: 12px;
}
.box:hover {
  color: #f00;
}

5、稍微高级一点的

（1）使用变量

bodyColor = red
body
  font-size bodyColor

相当于
body {
  font-size: #f00;
}

 （2）使用函数

add(a, b)
  a + b
body 
  padding add(10px, 5)
//相当于
body {
  padding: 15px;
}

小技巧：当不确定自己写的stylus语句是否如自己所想，可以验证一下，在中文文档里有一个在线工具。

中文文档：https://stylus.bootcss.com/

git地址：https://github.com/stylus/stylus

张鑫旭中文文档：https://www.zhangxinxu.com/jq/stylus/