张鑫旭 css预处理,css预处理器之stylus初识

前因

今天在吭哧吭哧的学习vue项目，突然发现一个该项目用的预处理器stylus，平常见到的都是less与sass，所以在那一瞬间以为是一个新东西，希望找到出处与用法

出乎意料

令人难过的事，翻出来的历史礼物已经是8年前的事物了，可以看一下stylus与less和sass的出生对比：

Sass：2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架，目前受LESS影响，已经进化到了全面兼容CSS的SCSS。sass 中文文档Sass 参考手册

Less：2009年出现，受SASS的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手，在ruby社区之外支持者远超过SASS，其缺点是比起SASS来，可编程功能不够，不过优点是简单和兼容CSS，反过来也影响了SASS演变到了SCSS的时代，著名的Twitter Bootstrap就是采用LESS做底层语言的。Less 中文文档

Stylus：2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区之内有一定支持者，在广泛的意义上人气还完全不如SASS和LESS。Stylus 中文文档

学习

虽然是已经很久远的事情，而且就目前来说，市场热度并不是特别好，但是还是可以学习一波，而且初步使用，感觉写起来好像比less与sass要简洁，虽然可能可读性不是特别好：

.header

display:flex

line-height: 2.5rem

background:$bgColor

color:#fff

.header-left

width: 2rem

float: left

.back-icon

text-align:center

font-size:1.3rem

没有了大括号，冒号也是可有可无，还有很多的其他特性等待我去发现

贴两个学习文章：

张鑫旭大大的翻译文档

CSS 预处理的区别的深度比较 - Stylus/Sass/Less

有兴趣的可以一起看一下

待续

了解时间不多，还不足以写一篇成型的文章，留一篇初识完成本周的任务，后面会自己去尝试css预处理器之间的不同，与各位分享～