stylus 详解与引入

Stylus介绍及特点
Stylus 是一个基于Node.js的CSS的预处理框架，诞生于2010年，比较年轻，可以说是一种新型语言，其本质上做的事情与 Sass/LESS 等类似， 可以以近似脚本的方式去写CSS代码，创建健壮的、动态的、富有表现力的CSS，默认使用 .styl 的作为文件扩展名，支持多样性的CSS语法。Stylus比LESS更强大，而且基于nodejs比Sass更符合我们的思路。

Stylus的特点如下

基于js
Node.js是一个Javascript运行环境(runtime)，是对Google V8引擎进行了封装，V8引擎执行Javascript的速度非常快，性能非常好。对于不了解Node.js的开发人员，不会增加太多学习成本。Stylus基于Node.js，换而言之，就是借助JavaScript让CSS更富有表现力，更动态，更健壮！而且还有专门的JavaScript API。

支持Ruby之类框架
虽然Stylus基于Node.js，但是依然支持Ruby之类框架，还有FireBug插件FireStylus， sublimetext插件，便于开发、调试。

功能强大，使用灵活，支持多样性的CSS语法
Stylus的功能比LESS强大，不逊于Sass。在用法上，支持传统的CSS，而且相对于传统的用法，更加简洁、灵活，像省掉花括号、冒号，分号，甚至使用混合的CSS编程，Stylus都可以接受。

Stylus的优缺点
【优点】

解决样式覆写的问题，尤其是mixin式复用

使用纯CSS，我们可以抽象出一些常用的布局CSS属性组合，通过CSS的类组合来达成常见的mixin式复用，然而这种方案存在一些问题，例如:

当页面重构时，需要频繁修改class name，这个问题在后端人员掌握着视图层的时候格外突出，前后端耗费很多沟通成本；

在约束上下文的时候非常无力，比如“只有在ul下面的img.db允许是display:block”的规则，写成“ul img.db { display: block; }”就完全跑偏了，它违背了创建这个.db类时的本意，造成了代码的可读性和可维护性下降。

如果你要改动规则，需要同时修改HTML和CSS，也可能造成新的样式问题。

而通过Stylus可以建立一种新的代码风格，只允许CSS Class代表UI模块的抽象，这样一来，改动样式时不至于通知后端改模板，然后在CSS Class内部实现mixin。而这正是CSS的短板，CSS体系内的用法只有复制粘贴。

可缓解多浏览器兼容造成的冗余

进入CSS3的时代，旧式CSS hack如filter，新式兼容前缀如-webkit-等，都是冗余，修改的时候也需要修改多处，不容易维护。在Stylus里面，写个函数就能解决，多次复用也不需要看到如此之多的hack。

提高效率，节约成本

用Stylus开发CSS可以提高效率，它类似于一种CSS的方言，可以用更精简的语法表达更多的意思。比如，Stylus中可以使用变量，比如和 UED 同学订好各种样式的规范，做好变量后开发中直接使用，避免页面中的各种杂乱样式。当样式需求有变动时，也可以重新给变量赋值，一下改掉相关样式，不用再一点一点的改。

使CSS开发更加灵活

Stylus可以使用变量、条件、循环，兼容传统的CSS样式，等等，可以让CSS的开发和修改更加灵活。

【缺点】

开发过程增加步骤

CSS的好处在于简便、随时随地被使用和调试，使用Stylus，增加了预编译CSS的步骤，让我们开发工作流中多了一个环节，调试也多了个步骤。

增加学习成本。

虽然Stylus简单易学，可以兼容传统CSS，但是当开发和维护团队都从CSS过渡到Stylus时，还是需要一点学习成本的，而且初学者使用起来，不一定能明显提高效率。

基本语法请点击这里。
vue 引入 stylus
建立好项目后我们来安装stylus

npm install stylus stylus-loader --save-dev

这样就安装上了stylus。

记得在 style 标签加上：

<style scoped lang="stylus">

在vue组件中，在style标签上添加scoped属性，以表示它的样式作用于当下的模块，很好的实现了样式私有化的目的，这是一个非常好的机制。但是要慎用！！！在实际业务中我们往往会对公共组件样式做细微的调整，如果添加了scoped属性，那么样式将会变得不易修改。