浅谈css预处理器Sass、Le和Stylus

  相信前端开发人员对与CSS(Cascading Style Sheet-级联样式表)这种「面向命名语言」,一定非常熟悉。你可能在某个舍友熟睡的深夜,还在电脑面前被 css 繁重、冗杂的样式,折磨的死去活来。

  我们曾经面对 css 很多令人发指的不友好特性,也因为 css 的低复用性而刀耕火种。

  本文将主要介绍 Sass、Less 和 Stylus 这三种 css 预处理器,将从各个角度比较它们的异同。

  :2007年诞生,最早也是最成熟的CSS预处理器,拥有ruby社区的支持和compass这一最强大的css框架,目前受LESS影响,已经进化到了全面兼容CSS的SCSS。

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

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

  Sass有两种语法,分别以「 *.sass 」和「 *.scss 」为扩展名。这里你可以查看Sass 和 Scss 的异同。Sass 兼容 css ,你可以在 sass 文件里写 css,也可以严格按照 sass 的缩进方式省去「大括号」和「分号」,最终它们都会被编译成标准 css,比如:

  Less 受 Sass 的影响非常大,以「 *.less 」为扩展名,是 sass 之后的又一款优秀的 css 预处理器。其特点包括:

  相比于 sass 的激进和 less 的常规,Stylus 是一个高效、动态以及丰富的 CSS 预处理器。它同时支持缩进的和通俗的两种风格的 CSS 语法风格。

  Stylus 扩展名为「 *.styl 」,跟另外两款 css 预处理器相比略显年轻,社区以及推广程度也不及 sass 和 less,但它的一些优秀特性同样令人着迷。

  Nib是 Stylus 的应用的类库。给你的「 *.styl 」添加 Nib 的最快方式是克隆 Nib 的 Git 版本库并引入,因为有了 Nib,Stylus 的高效性才更为突出。

  除了包含 Less 的一些优点,Stylus 在容错性上的突出特性也十分吸引我,你可以在一个 Stylus 文件里这样写,且它们都会被编译成标准 css:

  Sass声明变量必须是『$』开头,后面紧跟变量名和变量值,而且变量名和变量值需要使用冒号:分隔开。

  Stylus 中声明变量没有任何限定,结尾的分号可有可无,但变量名和变量值之间必须要有『等号』。但需要注意的是,如果用“@”符号来声明变量,Stylus会进行编译,但不会赋值给变量。就是说,Stylus 不要使用『@』声明变量。Stylus 调用变量的方法和Less、Sass完全相同。

  css 预编译器把变量赋予作用域,也就是存在生命周期。就像 js 一样,它会先从局部作用域查找变量,依次向上级作用域查找。

  十分真诚的说,三种 css 预编译器的「选择器嵌套」在使用上来说没有任何区别(也可能是我没发现)。Sass 除了常规的采用『&』替代父级选择器之外,还提供了「奇葩的属性嵌套」:

  css 属性的继承是一个非常重要的特性,好消息是三种预编译器都对此做出了改善。

  CSS中,不建议用@import导入css,因为会增加http请求。但 CSS 预处理器中的导入和CSS的有hhe很大区别,它是将不同 css 是在语义上导入,最终编译结果会生成一个CSS文件。

  值得注意的是,如果不同文件相互引入的时候,出现相同变量名时可能会引起错误。所以我的建议是单独有一个 var.sass/less/styl 文件来记录所有你定义的变量。

  Sass和Less语法严谨、Stylus相对自由。因为Less长得更像 css,所以它可能学习起来更容易。

  Sass 和 Stylus 都具有类语言的逻辑方式处理:条件、循环等,而 Less 需要通过When等关键词模拟这些功能,这方面 Less 比不上 Sass 和 Stylus。

  Less 在丰富性以及特色上都不及 Sass 和 Stylus,若不是因为 Bootstrap 引入了 Less,可能它不会像现在这样被广泛应用(个人愚见)。

  身边有几个朋友在 css 预编译器的选择上犹豫不决,其实我认为选择什么无所谓,关键在于你的熟练程度以及团队合作方面的有利性。

  当然,在大致学习、使用和研究了这三种 css 预编译器之后,我想我会选择 Stylus,它的语法自由度很高,而且写出来的代码非常简洁,这点十分吸引我。

  欢迎在我的 Github 上提 issue:jeasonstudio (赵吉彤) · GitHub

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://mrcouponcodes.com/Sass_less/2020/1207/9.html