stylus——你值得拥有的伙伴

你还在使用传统的样式写法？

    div{
            width: 200px;
            height: 200px;
            background:red;
        }

如果可以不写花括号会怎么样？

    div
            width: 200px;
            height: 200px;
            background:red；

无疑，省了shift+{ 的按键时间，直接回车，进入样式书写。
如果在把冒号和分号也省略了呢？

	  div
  	        width 200px
            height 200px
            background red

我叉嘞，这是什么东西，这样写读得出来吗？
很哈，很抱歉，如果你使用了stylus，就能实现了。（有的人起初不适应，毕竟码习惯了，突然换了一种风格，会有些许不习惯，小编当初刚用时仍会下意识的{} ； ：的使用，最开始的目的就是为了“偷懒”，最快最简洁的方式完成，好了，现在就很爽了，vue上也可以安装stylus）

当然以上只是很入门很入门的，正如我所说，只是为了起初的快速，而后深入了解发现，他的规则写法，和父级引用

div
  background blue
  h1,h2
    color green
    &:hover
      color white
  &:hover
      color white

其转译到css中成为

div {
  background: #00f;
}
div h1,
div h2 {
  color: #008000;
}
div h1:hover,
div h2:hover {
  color: #fff;
}
div:hover {
  color: #fff;
}

很花哨吧！
说这些是为了让大家有兴趣使用，下面附上安装方法（以及webstorm的配置）
1、首先下载安装nodejs（https://nodejs.org/en/）
2、可在cmd命令提示符下输入：npm install -g stylus
3、安装完了 （- 。-）（冷漠表情）

然后进入到webstorm中，开始配置
1、

2、

3、

此处可以看到，还有sass和less等预编译器，还有别的模板可以添加。
至此，配置完成，可以创建了！
需要注意的是创建的不再是css文件而是

最后的最后附上张鑫旭的stylus文档，超厉害的！
https://www.zhangxinxu.com/jq/stylus/selectors.php