学习CSS预处理器:Sass和less进行对比

2024-07-11 08:48:21

字体：大中小

来源：转载

供稿：网友

什么是CSS预处理器？
Css可以让你做很多事情，但它毕竟是给浏览器认的东西，对开发者来说，Css缺乏很多特性，例如变量、常量以及一些编程语法，代码难易组织和维护。这时Css预处理器就应运而生了。Css预处理器定义了一种新的语言将Css作为目标生成文件，然后开发者就只要使用这种语言进行编码工作了。预处理器通常可以实现浏览器兼容，变量，结构体等功能，代码更加简洁易于维护。 “我应该选择哪种css预处理器？”是最近网上的一大热门话题，很多人为此争论不休。相比过去我们对是否应该使用Css预处理器的话题，这已经是很大的进步了。目前比较流行的两种预处理器是Sass和Less。
至于他们谁更优秀一些：简短的答案是:Sass
稍长一点的答案：Sass比其他任何预处理器语言都好，但如果你正在使用Less，这也很酷！这可以证明你正在使用预处理器来写帮助自己写更好的代码。
非常长的答案：请继续往下看
使用之前需要学习的知识 – Ruby，js，命令行等等
使用Css预处理器唯一真正需要学习的只有语法，SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样可以使用。你需要的只是一个像CudeKit的应用来观察和编译你所撰写的文件。 Less就更不用了，只需要调用一个js即可(在客户端运行)，或者借助Node.js（服务器运行）。
获胜者：无。
对css3的帮助
Css3提供了很多新特性，比如渐变、动画、圆角等等，但是在使用这些高级特性的时候，我们往往需要编写( -moz-、-webkit-、-ms- …)。不论Sass和Less，你都可以用自己的混合来编写。但是在项目中当我们需要修改这些繁琐的前缀时，我们如何不用返回每一行代码并且更新它们？你大概也不会更新手工混合的文件。但是在Sass中，我们可以使用开源的Css框架，会自动更新并自动处理浏览器前缀。我们只需要保持更新，外加偶尔按一下编译键，它就会帮助我们自动处理所有的前缀问题，毫不费力。( -moz-、-webkit-、-ms- …)。不论Sass和Less，你都可以用自己的混合来编写。但是在项目中当我们需要修改这些繁琐的前缀时，我们如何不用返回每一行代码并且更新它们？你大概也不会更新手工混合的文件。但是在Sass中，我们可以使用开源的Css框架，会自动更新并自动处理浏览器前缀。我们只需要保持更新，外加偶尔按一下编译键，它就会帮助我们自动处理所有的前缀问题，毫不费力。
获胜者：Sass。
逻辑/循环
Less可以做防御型混合，这种混合只在条件为真的情况下生效。比如你想根据文本颜色来设置背景色，当文本色比较浅的时候背景色很深，文本色比较深的时候背景色很浅。那么你就得把混合分成两部分，以确保有一种情况条件为真，使混合生效。

复制代码

上一篇：网页制作中的网页字体空格间距问题的技巧

下一篇：利用CSS3参考手册和CSS3代码生成工具加速来学习网页制