摘要:使用预编译处理的优势使用预处理器,可以提供缺失的样式层复用机制减少冗余代码,提高样式代码的可维护性。所以我们在实际项目中衡量预编译方案时,还是得想想,比起带来的额外维护开销,预处理器有没有解决更大的麻烦。
一、什么是css预编译处理?
CSS 预编译处理,从字面上理解,就是预先编译处理CSS。它扩展了 CSS 语言,增加了变量、Mixin、函数等编程的特性,使 CSS 更易维护和扩展。CSS预编译的工作原理是提供便捷的语法和特性供开发者编写源代码,随后经过专门的编译工具将源码转化为CSS语法。
CSS预编译器几乎成为现如今开发CSS的标配,它从以下几个方面提升了CSS开发的效率:
增强编程能力;
增强可复用性;
增强可维护性;
更便于解决浏览器兼容性。
不同的预编译器特性虽然有所差异,但核心功能均围绕这些目标打造,比如:
• 嵌套; • 变量; • mixin/继承; • 运算; • 模块化;
嵌套是所有预编译器都支持的语法特性,也是原生CSS最让开发者头疼的问题之一;
mixin/继承是为了解决hack和代码复用;变量和运算增强了源码的可编程能力;
模块化的支持不仅更利于代码复用,同时也提高了源码的可维护性。
1.CSS有具体以下几个缺点:
1) 语法不够强大,比如无法嵌套书写,导致模块化开发中需要书写很多重复的选择器; 2) 没有变量和合理的样式复用机制,使得逻辑上相关的属性值必须以字面量的形式重复输出,导致难以维护。
2.使用CSS预编译处理的优势:
使用CSS预处理器,可以提供 CSS 缺失的样式层复用机制、减少冗余代码,提高样式代码的可维护性。大大提高了我们的开发效率。
3.使用CSS预编译处理的劣势:
CSS预处理器也不是万金油,CSS的好处在于简便、随时随地被使用和调试。预编译CSS步骤的加入,让我们开发工作流中多了一个环节,调试也变得更麻烦了。更大的问题在于,预编译很容易造成后代选择器的滥用。所以我们在实际项目中衡量预编译方案时,还是得想想,比起带来的额外维护开销,CSS预处理器有没有解决更大的麻烦。
目前css主流预处理器是Sass、Less和Stylus,最早的CSS预编译器是2007年起源于Ruby on Rails社区的SASS,目前比较流行的其他CSS预编译器如Less、Stylus的诞生都一定程度上受到了SASS的影响和启发。
三大框架简介四、CSS预处理器的选择
1、Sass:2007年诞生,最早也是最成熟的CSS预处理器,拥有ruby社区的支持和compass这一最强大的css框架,目前受LESS影响,已经进化到了全面兼容CSS的SCSS。
其实现在的Sass已经有了两套语法规则:一个依旧是用缩进作为分隔符来区分代码块的;另一套规则和CSS一样采用了大括号({})作为分隔符。后一种语法规则又名SCSS,在Sass3之后的版本都支持这种语法规则。2、Less:2009年出现,受SASS的影响较大,但又使用CSS的语法,让大部分开发者和设计师更容易上手,在ruby社区之外支持者远超过SASS,其缺点是比起SASS来,可编程功能不够,不过优点是简单和兼容CSS,反过来也影响了SASS演变到了SCSS的时代,著名的Twitter Bootstrap就是采用LESS做底层语言的。
3、Stylus:2010年产生,来自Node.js社区,主要用来给Node项目进行CSS预处理支持,在此社区之内有一定支持者,在广泛的意义上人气还完全不如SASS和LESS
Stylus被称为是一种革命性的新语言,提供一个高效、动态、和使用表达方式来生成CSS,以供浏览器使用。Stylus同时支持缩进和CSS常规样式书写规则。
1、Sass
优点
1) 用户多,更容易找到会用scss的开发,更容易找到scss的学习资源; 2) 可编程能力比较强,支持函数,列表,对象,判断,循环等; 3) 相比less有更多的功能; 4) Bootstrap/Foundation等使用scss; 5) 丰富的sass库:Compass/Bourbon;
缺点
安装node-sass会经常失败或者报错,需要使用cnpm或者手工安装
2、Less
优点:
可以在浏览器中运行,实现主题定制功能;
缺点:
编程能力弱,不直接支持对象,循环,判断等; @variable 变量命名和css的@import/media/keyframes等含义容易混淆; mixin/extend的语法比较奇怪; mixin的参数如果遇到多参数和列表参数值的时候容易混淆;
3、Stylus
优点:
来自NodeJS社区,所以和NodeJS走得很近,与JavaScript联系非常紧密。还有专门JavaScript API: http://learnboost.github.io/stylus/docs/js.html 支持Ruby之类等等框架3.更多更强大的支持和功能
缺点:
人气不高和教程较少
总结:
Sass看起来在提供的特性上占有优势,但是LESS能够让开发者平滑地从现存CSS文件过渡到LESS,而不需要像Sass那样需要将CSS文件转换成Sass格式。Stylus功能上更为强壮,和js联系更加紧密。
Sass中文文档:http://sass.bootcss.com/
Less中文文档:https://less.bootcss.com/
Stylus官方文档:http://stylus-lang.com/
Stylus 中文文档:https://www.zhangxinxu.com/jq...
如果你觉得这篇文章对你有所帮助,那就顺便点个赞吧,点点关注不迷路~
黑芝麻哇,白芝麻发,黑芝麻白芝麻哇发哈!
前端哇发哈
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/117359.html
摘要:上面的命令会将编译的传递给,你可以将它保存到一个文件中除了上面的命令转译源文件之外,现在还有很多第三方开发的工具,例如是一个前端预处理器语言图形编译工具,支持,帮助开发者更高效地使用它们进行开发。 一、Sass、LESS和Stylus的安装 1.Sass的安装 Sass是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样可以正常使用Sass。只是必须先安装Ruby,然后再安装...
摘要:值得庆幸的是,这三款预处理器语言的语法和语法都差不多。在这一节中,我们依次来对比一下这三款预处理器语言各种特性的异同之处,以及使用方法。预处理器语言支持任何变量例如颜色数值文本。 一、Sass、LESS和Stylus的语法 每一种语言都有自己一定的语法规则,CSS预处理器语言也不例外,在真正使用CSS预处器语言之前还有一个不可缺少的知识点,就是对语法的理解。值得庆幸的是,这三款CSS预...
摘要:正在暑假中的课多周刊第期我们的微信公众号,更多精彩内容皆在微信公众号,欢迎关注。若有帮助,请把课多周刊推荐给你的朋友,你的支持是我们最大的动力。原理微信热更新方案涨知识了,热更新是以后的标配。 正在暑假中的《课多周刊》(第1期) 我们的微信公众号:fed-talk,更多精彩内容皆在微信公众号,欢迎关注。 若有帮助,请把 课多周刊 推荐给你的朋友,你的支持是我们最大的动力。 远上寒山石径...
摘要:正在暑假中的课多周刊第期我们的微信公众号,更多精彩内容皆在微信公众号,欢迎关注。若有帮助,请把课多周刊推荐给你的朋友,你的支持是我们最大的动力。原理微信热更新方案涨知识了,热更新是以后的标配。 正在暑假中的《课多周刊》(第1期) 我们的微信公众号:fed-talk,更多精彩内容皆在微信公众号,欢迎关注。 若有帮助,请把 课多周刊 推荐给你的朋友,你的支持是我们最大的动力。 远上寒山石径...
摘要:为了解决问题,推出了服务端预渲染,以便提高对优化。应用,到了,单页面应用优秀的用户体验,逐渐成为了主流,页面整体式渲染出来的,称之为客户端渲染。客户端接收数据,然后完成最终渲染。通过对客户端服务端基础框架的抽象组织,主要关注的是应用的渲染。 现在前端开发一般都是前后端分离,mvvm和mvc的开发框架,如Angular、React和Vue等,虽然写框架能够使我们快速的完成开发,但是由于前...
阅读 1441·2021-11-25 09:43
阅读 2582·2021-09-24 10:30
阅读 3662·2021-09-06 15:02
阅读 3596·2019-08-30 15:55
阅读 3302·2019-08-30 15:53
阅读 1695·2019-08-30 15:52
阅读 2143·2019-08-30 14:21
阅读 2011·2019-08-30 13:55