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属性，那么样式将会变得不易修改。