传统CSS的缺陷

css的可重用性差、代码冗余量大、不支持语言特性如变量循环及方法等（虽然css也在慢慢支持，比如现在的css变量等，但明显这些远远不够）。

三大预处理

于是预处理器出现了：

• 2007年，第一款预处理器Sass诞生。Sass是迄今为止最成熟的预处理器，拥有ruby社区的支持和compass这一最强大的css框架，目前受LeSS影响，已经进化到了全面兼容CSS的SCSS。
• 2009年，受Sass的影响，Less出现了。与Sass相比，他更简单但可编程性不足。

• 等JS特性，看起来很“JavaScript”。

预处理器趋势对比

npm近五年的下载趋势：

GitHub近五年的活跃状态：

虽然Sass是最早诞生的预处理器，但是最受欢迎的处理器确实Less；同时关注度和社区活跃度最好的也是Less，其次是Stylus，Sass最末。

我们的选择

其实之前已经透露过，我们预处理器选择使用和我们团队同样年轻的Stylus，其原因如下：

• 功能强大，语法非常“JavaScript”。
• 语法精简灵活

• 只需要依赖NodeJS
• 方便易用

• 高效

），这让代码看起来很简洁（他俩绝对是抄了Python的作业）

Stylus教程

思来想去，还是决定不做无意义的搬砖了，关于教程这一块张旭鑫大佬已经写得很好的（毕竟是css领域的大佬），相关教程可以参考：

Stylus中文版参考文档

Stylus官网

风格约束

核心思想是，能少按一个键就少按，一个键，毕竟：

所以，代码风格应该是：

• 不写任何无意义的符号（简洁性）
• 层级基于嵌套（层次感）

• 冗余代码抽离成模块或者写成混入（Mixins）
• 极其相似又有规律可循的代码写成循环或者混入

一个小而不全的例子，例如我页面中有这样的结构：

<template lang="pug">
  div(:class="$style.inner")
    div(:class="$style.box")
</template>

那么我的样式应该这么写：

<style lang="stylus" rel="stylesheet/stylus" module>
.inner
  position relative
  color=#41b883
  .box
    position absolute
    left 50%
    top 50%
    width 200px
    height @width
    margin-left -(@width/2)
    margin-top -(@height/2)
    background color
    ear(direction=left)
      breadth=40px
      position absolute
      content ''
      width breadth
      height breadth
      {direction} 25%
      transform-origin center
      transform translate(direction is left?-50%:50%,-50%) rotate(-45deg)
      background @background
    &::after
      ear()
    &::before
      ear(right)
</style>

<style lang="stylus" rel="stylesheet/stylus" module>

</style>

<style>

</style>

<style  lang="stylus" rel="stylesheet/stylus" module>

</style>

yarn add stylus stylus-loader
npm i stylus stylus-loader

npm install stylus -g