CSS 的预处理程序分别都有哪些优缺点

html-css014

CSS 的预处理程序分别都有哪些优缺点,第1张

普遍的三款 CSS 预处理器框架,分别是 Sass、Less CSS、Stylus。

CSS 预处理器概述:CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性,无需考虑浏览器的兼容性问题,例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧,可以让你的 CSS 更见简洁,适应性更强,代码更直观等诸多好处。

总结来讲就是用编程的方法来写CSS样式,而不是手工一行行码,相当于从手工业时代进化到工业时代。

三种CSS 预处理器(框架)简介:

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

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

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

Stylus主要优点:

1. 简短直观,缩进让CSS的层次非常直观。

2. At 属性引用可以减少维护量。

3. 函数和Mixin,重用的利器。

CSS 预处理器优缺点:

A、可以把PostCSS和预处理器(Sass、Stylus或LESS)结合起来使用。

B、部分PostCSS插件配合预处理器将功能添加到你的工作流中,让你工作变得更加轻松。如果只使用一个预处理器,而不使用这些插件,工作流至少会变得更加困难。

C、PostCSS插件和喜欢的预处理器(Sass、Stylus或LESS)之一结合在一起使用。

D、在常规的预处理器通过使用混合宏或函数特性像程序一样处理代码,达到类似的结果。不过不同的是CSS代码,而其他一切通过插件去处理,而这个过程中不需要调用函数,也没有混合宏等等。

使用技巧:Sass看起来在提供的特性上占有优势,但是LESS能够让开发者平滑地从现存CSS文件过渡到LESS,而不需要像Sass那样需要将CSS文件转换成Sass格式。

而C和UNIX两者都是贝尔实验室的丹尼斯·里奇(Dennis

MacAlistair

Ritchie)和肯尼思·汤普森(Kenneth

Lane

Thompson)设计、开发的