LESS/SASS优点: 开发速度提升; 代码优化效率提高(对开发者而言); 代码更通俗易懂(对开发者而言); 维护简单便捷; 代码更干净,优美; 功能更多更强,CSS做出JS的特效(其实就是JS); 总而言之,LESS/SASS就是CSS里面的jQuery,简化,减少开发时间,提升开发者开发体验。 LESS/SASS缺点: 舍弃用户体验来提高开发的效率,可以查考Bootstrap的缺点; 舍弃网页打开速度换取开发效率提升; 需要一个学习的过程,用之不当反而弄巧反拙; 总而言之,LESS/SASS缺点就是需要多一个编译器来重新编译一次你的CSS代码,也就是给浏览器多了一道工序,网页显示的速度会减慢(网页显示顺序,从上至下,一般CSS放在头部,先HTML DOM元素-->CSS-->脚本文件-->页面元素如图片,视频,音频--->最后完全显示) 你在CSS工序加了一个步骤,速度自然慢,时间自然多了。
普遍的三款 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格式。