stylus介绍与引入

Stylus的介绍

Stylus 是一个基于Node.js的CSS的预处理框架，诞生于2010年，比较年轻，能够说是一种新型语言，其本质上作的事情与 Sass/LESS 等相似， 能够以近似脚本的方式去写CSS代码，建立健壮的、动态的、富有表现力的CSS，默认使用 .styl 的做为文件扩展名，支持多样性的CSS语法。

【优势】

解决样式覆写的问题，尤为是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的开发和修改更加灵活。

vue 引入 stylus

创建好项目后咱们来安装stylus

npm install stylus stylus-loader --save-dev

这样就安装上了stylus。

记得在 style 标签加上：

<style scoped lang="stylus">

注意: npm run build 时记得修改 config 文件夹下的 index.js 中的 build 对象。

 

基本使用

参考：https://www.jianshu.com/p/5fb15984f22d

媒体查询参考：https://stylus.zcopy.site/docs/media.html