工作记录：Stylus基础教程及应用

前言

传统CSS的缺陷

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

三大预处理

于是预处理器出现了：

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

• 2010年，Stylus自Node.js社区诞生，主要用于Node项目的预处理支持。因为诞生自Node社区，Stylus看起来更加的“编程化”，他支持变量运算、方法、剩余参数、迭代、条件判断、继承、混入等JS特性，看起来很“JavaScript”。

预处理器趋势对比

npm近五年的下载趋势：

GitHub近五年的活跃状态：

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

我们的选择

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

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

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

• 高效

如果你习惯了pug的语法，Stylus使用起来会感觉极度舒适。Stylus的语法和pug一样：基于缩进、省去重复的符号（{、}、;、:），这让代码看起来很简洁（他俩绝对是抄了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>

Vue项目中使用

创建项目

在Vue项目中使用其实非常简单，直接Vue-ui一把梭

使用Vueui最大的好处是，我们只需要点点鼠标输入必要的内容，VueCli会自动帮我们完成：

完成上面操作创建项目之后，就可以在项目中使用Stylus了；当然，你的标签也要改成下面格式：

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

</style>

修改文件模板以获取新建文件支持

以webstrom为例，setting>Editor>File and Code Templates，选中Vue Single File Component，将

<style>

</style>

改为：

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

</style>

此时，创建的Vue组件中默认使用Stylus。

老项目中使用

老项目中使用Stylus只需要下载stylus、stylus-loader即可，使用下面的命令安装

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

然后修改<style>标签

小程序中使用

因为微信小程序一个页面或组件对应wxss、wxml、js三个文件（有时候觉得挺蛋疼的），所以如果想要在小程序项目中使用Stylus，则必须将Stylus文件编译成wxss文件（TypeScript支持也是这么做的）。

解决方法其实也很多，如：webpack、glup等等。但是我们不需要这么麻烦，webstrom已帮你搞定，这也是我推崇webstrom的原因之一。

只需要在webstrom中稍微置一下即可：

当然，前提是你需要全局下载Stylus：

npm install stylus -g

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。