https://www.cnblogs.com/cpqwebfe/p/7048612.html

什么是Stylus

• Stylus是一个CSS预处理器。

什么是CSS预处理器

• 关于CSS预处理器，推荐先行阅读这篇文章：为您详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus
  现在你应该对CSS预处理器有个大概的认识了，总的来说，CSS预处理器为CSS提供了更多的更加灵活的可编程性，是不是很棒！

选型

• 那么在SaaS，Less和Stylus中，为什么选择后者呢？因为Stylus是来源于Node.js社区，与js关系密切，所以基于Vue.js的开发，我们选择使用Stylus。

配置Stylus环境

安装

• 命令行中打cnpm install stylus

在让编辑器支持Stylus

编辑器选型

对于编辑器的选择之前一直没有单独说过，这里稍微提一下，对于写Vue或者前端代码，这里推荐的有三个编辑器

• WebStorm
• VSCode
• Sublime Text

对于电脑配置较高的内存较大的，推荐使用WebStorm，这个编辑器很智能也很庞大，对于电脑配置稍低的，推荐使用后面两个。
另外，在编辑代码时，当时用后两种编辑器时，很依赖各种各样的插件
当你觉得使用的时候很不爽的时候
就去网上搜相应的插件
比如我需要Vue高亮语法的插件，就去搜索安装Vue插件
那么对于Stylus，我们也只需要安装Stylus的插件就可以了。
关于安装插件，这里有几个连接

• Sublime Text插件安装方法和常用插件
• Sublime Text写Vue
  然后具体的不多说，大家可以百度谷歌

在编辑器安装支持Stylus

• 这个就是在编辑器安装Stylus高亮插件，sublime直接在搜索安装Stylus，WebStorm不需要单独安装插件，新建Stylus文件是，只需要New->stylesheet->stylus即可

  PS.Stylus的拓展名是.styl

初次使用

初始化项目

• vue init webpack stylus
• cd stylus
• cnpm install
• cnpm install stylus --save-dev
• cnpm install stylus-loader --save-dev

运行项目

• cnpm run dev

使用Stylus

在.vue文件中使用

引入单独的.styl文件

在写css之前，我新建了几个div

• 新建.styl文件

• 编写Stylus

• 引入文件

Stylus 教程

www.jc2182.com/stylus/styl…

• 安装

安装 Stylus 很简单，前提是你已经安装了 Node.js。 到 Node.js 官网下载适合你的操作系统的安装包安装即可。还要检查一下 npm 是否也一并安装了。

$ npm install stylus -g

• Stylus 特性

  下面列出 stylus 的所有特性：

  • 冒号可有可无
  • 分号可有可无
  • 逗号可有可无
  • 括号可有可无
  • 变量
  • 插值（Interpolation）
  • 混合（Mixin）
  • 数学计算
  • 强制类型转换
  • 动态引入
  • 条件表达式
  • 迭代
  • 嵌套选择器
  • 父级引用
  • Variable function calls
  • 词法作用域
  • 内置函数（超过 60 个）
  • 语法内函数（In-language functions）
  • 压缩可选
  • 图像内联可选
  • Stylus 可执行程序
  • 健壮的错误报告
  • 单行和多行注释
  • CSS 字面量
  • 字符转义
  • TextMate 捆绑
  • 以及更多！