Css可以让你做很多事情，但它毕竟是给浏览器认的东西，对开发者来说，Css缺乏很多特性，例如变量、常量以及一些编程语法，代码难易组织和维护。这时Css预处理器就应运而生了。Css预处理器定义了一种新的语言将Css作为目标生成文件，然后开发者就只要使用这种语言进行编码工作了。预处理器通常可以实现浏览器兼容，变量，结构体等功能，代码非常简洁易于维护。 “我应该选择哪种css预处理器？”是近期网上的一大热门话题，很多人为此争论不休。相比过去我们对是否应该使用Css预处理器的话题，这已经是很大的进步了。目前比较流行的两种预处理器是Sass和Less。
至于他们谁更优秀一些：简短的答案是:Sass
稍长一点的答案：Sass比其他任何预处理器语言都好，但如果你正在使用Less，这也很酷！这可以证明你正在使用预处理器来写帮助自己写很好的代码。
非常长的答案：请继续往下看
使用Css预处理器唯yi真正需要学习的只有语法。你需要使用一个像CudeKit的应用来观察和编译你所撰写的文件。至于Ruby的语法和关于命令行的一些知识，我们不必深究，所以对于学习sass它们不是问题。 Less就更不用了，只需要调用一个js即可(在客户端运行)，或者借助Node.js（服务器运行）。 获胜者：无。
Css3提供了很多新特性，比如渐变、动画、圆角等等，但是在使用这些高级特性的时候，我们往往需要编写浏览器前缀( -moz-、-webkit-、-ms- …)。不论Sass和Less，你都可以用自己的混合来编写浏览器前缀。但是在项目中当我们需要修改这些繁琐的前缀时，我们如何不用返回每一行代码并且新新它们？你大概也不会新新手工混合的文件。但是在Sass中，我们可以使用开源的Css框架Compass，Compass会自动新新并自动处理浏览器前缀。我们只需要保持新新，外加偶尔按一下编译键，它就会帮助我们自动处理所有的前缀问题，毫不费力。 获胜者：Sass。
Less可以做防御型混合，这种混合只在条件为真的情况下生效。比如你想根据文本颜色来设置背景色，当文本色比较浅的时候背景色很深，文本色比较深的时候背景色很浅。那么你就得把混合分成两部分，以确保有一种情况条件为真，使混合生效。
.set-bg-color (@text-color) when (lightness(@text-color) >= 50%) {
background: black;
}
.set-bg-color (@text-color) when (lightness(@text-color) < 50%) {
background: #ccc;
}
然后就可以得到想要的背景：
.box-1 {
color: #BADA55;
.set-bg-color(#BADA55);
}
Less模拟循环和递归:
.loopingClass (@index) when (@index > 0) {
.myclass {
z-index: @index;
}
// 递归
.loopingClass(@index - 1);
}
// 停止循环
.loopingClass (0) {}
// 输出
.loopingClass (3);
生成的css代码：
.myclass {z-index: 3;}
.myclass {z-index: 2;}
.myclass {z-index: 1;}
但也就是Less全部的逻辑和循环处理能力了，而Sass具有真正的语言处理能力。包括if/then/else、for循环、while循环，函数等等。没有诀窍，只有正确的语法，这使得Compass框架的兼容成为可能。 真正的For循环：
@for $i from 1 through 3{
.item-#{$i}{
width:100px*$i;
}
}
Css:
.item-1{width:100px;}
.item-2{width:200px;}
.item-3{width:300px;}
例如Compass框架有一个叫“background”的混合，它会给你所有你需要的和想要的，并且兼容所有浏览器的代码。 简洁易懂的代码：
.bam {
@include background(
image-url("foo.png"),
linear-gradient(top left, #333, #0c0),
radial-gradient(#c00, #fff 100px)
);
}
现在轮到这个怪物了（不幸的是，我们需要它，看看我们会得到的代码）：
.bam {
background: url('/foo.png'), -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #333333), color-stop(100%, #00cc00)), -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #cc0000), color-stop(100%, #ffffff));
background: url('/foo.png'), -webkit-linear-gradient(top left, #333333, #00cc00), -webkit-radial-gradient(#cc0000, #ffffff 100px);
background: url('/foo.png'), -moz-linear-gradient(top left, #333333, #00cc00), -moz-radial-gradient(#cc0000, #ffffff 100px);
background: url('/foo.png'), -o-linear-gradient(top left, #333333, #00cc00), -o-radial-gradient(#cc0000, #ffffff 100px);
background: url('/foo.png'), -ms-linear-gradient(top left, #333333, #00cc00), -ms-radial-gradient(#cc0000, #ffffff 100px);
background: url('/foo.png'), linear-gradient(top left, #333333, #00cc00), radial-gradient(#cc0000, #ffffff 100px);
}
获胜者：Sass
当你声明一个包涵一些样式的类之后，你想要另外一个和它只有少许不同的类，在less中你可以这样写
.module-a{
color:#333;
}
.module-b {
.module-a(); /* 把module-a所有的css代码拷贝到这里 */
border: 1px solid red;
}
这样.module-b便继承了.module-a的所有属性 生成的Css代码:
.module-a{
color:#333;
}
.module-b {
color:#333;
border: 1px solid red;
}
这在本质上就是继承，在Sass中也可以做同样的事情。但我们很好使用Sass的"@extend"，在"@extend"中.module-a的样式不仅仅是被复制到.module-b(可以扩展)中，在Css中对.module-a的定义被修改为.module-a,.module-b（这样做选择器的效率更高）。 Sass代码
.module-a {
/* 一堆css代码 */
}
.module-b {
/* 一些覆盖和扩展代码 */
@extend .module-a;
}
终终编译Css代码
.module-a, .module-b {
/* 一堆css代码 */
}
.module-b {
/* css代码*/
}
结果是Sass重写的选择器效率更高 获胜者：Sass
变量前缀：less使用"@",sass使用"$"。在css中@符号有继承的意义，而美元符号没有。我们可以说这个是个人喜好，没什么大不了的。但是我认为没有混淆概念的Sass在这里更有优势。 但是Sass的变量范围有些古怪，如果你在局部环境中重写了一个全局变量，那么全局变量的值会被改变
$color: black;
.scoped {
$color: white;
color: $color;
}
.unscoped {
// LESS = black (仍然是一开始定义的值black)
// SASS = white (被改写为white)
color: $color;
}
获胜者：Less
我们开始使用媒体查询的方式是在主样式表的底部加入针对媒体查询的媒体代码块。这样做很有用，但是它会导致响应的样式和原有的样式风格脱节。 CSS代码：
.some-class {
/* 基础样式 */
}
/* 很多行以后 */
@media (max-width: 800px) {
.some-class {
/* 响应样式 */
}
}
通过Sass或者Less，我们可以用嵌套把他们写到一起：
.some-class {
/* 基础样式 */
@media (max-width: 800px) {
/* 响应样式 */
}
}
通过Sass，我们甚至可以更牛逼一点，用一种更酷的写法：
=respond-to($name)
@if $name == small-screen
@media only screen and (min-width: 320px)
@content
@if $name == large-screen
@media only screen and (min-width: 800px)
@content
然后，我们可以通过这种技术使代码非常简洁和语义化
.column
width: 25%
+respond-to(small-screen)
width: 100%
需要Sass 3.2的环境（安装方法，在Start Command Prompt with Ruby中输入“gem install sass –pre”）
在大多数情况下，数学运算都是很相似的。但是sass和less在处理单位的适合还有些不同。例如less会假设第一个单位是你想要的，忽略后一个:
div {
width: 100px + 2em; // == 102px (怪异)
}
但是在Sass中，你会得到一个明确的错误提示：不兼容的单位"px"和"em"。我猜想是否应该提示错误是值得商榷的，但是相比之下我更希望得到错误，特别是当我在处理难易追查的变量的时候。 sass允许我们使用未知单位，但是less不可以。同时它们还有一些其他的不同之处，比如sass如何为有单位的值做乘法，但是这些都很浅显，不值得继续讨论。
|
评论加载中...
|
Copyright@ 2011-2017 版权所有：大连仟亿科技有限公司 辽ICP备11013762-1号 google网站地图 百度网站地图 网站地图
公司地址：大连市沙河口区中山路692号辰熙星海国际2215 客服电话：0411-39943997 QQ：2088827823 42286563
法律声明：未经许可，任何模仿本站模板、转载本站内容等行为者，本站保留追究其法律责任的权利！ 隐私权政策声明
