最近接觸了Bootstrap，涉及到了LESS，CSS的預處理器使用最廣泛的就是LESS和Sass，都是努力把CSS武裝成為開發語言，讓它從簡單的描述性語言過渡到具有程式特性的語言，主要的特性就是：變數、Mixins、嵌套、繼承等。就像教學裡說的：CSS的預處理器就是讓CSS從設計師的工具，變成開發人員的工具。但看完之後覺得，身為對CSS研究尚不透徹的前端小生，我最好還是不要高攀，況且在我目前的專案中拿LESS來寫CSS有點兒殺雞用牛刀的感覺。但回過頭來說，技不壓身。 。 。 bulabulabula~~好了，且正題，摘了一篇非常好的乾貨，分享給大家：非常明晰地介紹一下LESS和Sass的基本特性他們的區別。
事實證明，LESS——以及Sass——功能比這個多太多。 LESS和Sass在語法上有些共通性，例如下面這些：
● 混入(Mixins)——class中的class;
##● 參數混入－可以傳遞參數的class，就像函數一樣；
#● 巢狀規則－Class中嵌套class ，從而減少重複的程式碼；
● 運算——CSS中用數學；
● 顏色功能——可以編輯顏色；
● 名字空間(namespace)——分組樣式，從而可以被呼叫；
● 作用域－局部修改樣式；
#● JavaScript 賦值－在CSS中使用JavaScript表達式賦值。
LESS和Sass的主要差異就是他們的實作方式，LESSS是基於JavaScript，所以，是在客戶端處理的。
另一方面，Sass是基於Ruby的，然後是在伺服器端處理的。很多開發者不會選擇LESS因為JavaScript引擎需要額外的時間來處理程式碼然後輸出修改過的CSS到瀏覽器。關於這個有很多種方式，我選擇的是只在開發環節才使用LESS。一旦我完成了開發，我就複製然後貼上LESS輸出的到一個壓縮器，然後到一個單獨的CSS檔案來取代LESS檔案。另一個選擇是使用koala來編譯和壓縮你的LESS檔。兩個選擇都將最小化你的樣式輸出，從而避免由於使用者的瀏覽器不支援JavaScript而可能引起的任何問題。
LESS Is More
#介紹
#在你的專案中引入LESS很簡單：
1.下載less.js;
2.建立一個檔案來放你的樣式，例如style.less;
3.加入以下程式碼到你的HTML的中:
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
登入後複製
注意link的rel屬性。你需要在屬性值的最後面使用/less以使LESS運作。然後在link後面引入scirpt也是必須的。如果你在用
HTML5語法——為什麼不用呢？ ——你可以省去type=”text/css”和type=”text/javascript”。
變數
如果你是開發者，變數應該是你最好的朋友。如果你要重複的使用一個資訊(本例中是color)，將它設為一個變數就可以。這樣，你就可以保證自己的一致性並可能減少滾動代碼來查找顏色值、複製、貼上等繁瑣的工作了。你甚至可以加或減一些你需要渲染的HEX值到這些顏色上面。看下例子：
@blue: #00c;
@light_blue: @blue + #333;
@dark_blue: @blue - #333;
登入後複製
關於變數在LESS和Sass中的唯一差別就是，LESS用@，Sass用$。同時還有一些作用域上的差別，我後面會提到。
混入(mixin)
#偶爾，我們會建立一些會在樣式表中重複使用的樣式規則。沒有人會阻止你在一個HTML的元素中使用多個class，但是你可以用LESS，在樣式表中完成。為了描述這一點，我寫了一點兒例子：
.border {
border-top: 1px dotted #333;
}
article.post {
background: #eee;
.border;
}
ul.menu {
background: #ccc;
.border;
}登入後複製
在Sass中，你要在樣式規則前面加上@mixin聲明，規定它是個嵌套。然後，透過@
include來呼叫它：
@mixin border {
border-top: 1px dotted #333;
}
article.post {
background: #eee;
@include border;
}
ul.menu {
background: #ccc;
@include border;
}登入後複製
參數混入#
就像在CSS中有函数功能一样，这些对于那些在现在的CSS工作中多余的工作非常有用。最好和最有用的例子就是我们正在经历的从CSS2到CSS3过渡过程中的很多浏览器私有前缀。Nettuts+有一篇Jeffrey Way写的很赞的视频和文章，内容是包含着由有用的参数组成的文件，他们涵盖了大部分使用各个浏览器私有前缀的CSS3属性。例如，在他们的格式中，一个简单的处理圆角的mixin是这样的：
.border-radius( @radius: 3px ) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}登入後複製
在这个例子中，.border-radius有个默认的3px的圆角，但是你可以使用你需要的任何值。.border-radius(10px)将会生成半径为10px的圆角。
Sass中的语法很像LESS，只是使用$声明变量，然后使用前面提到的@mixin和@include来调用。
选择器继承
这个东西LESS并没有提供。通过这个功能，你可以将一个选择器附加到已经预先定义的选择器上，而无需再使用逗号将两者分开的写法了：
.menu {
border: 1px solid #ddd;
}
.footer {
@extend .menu;
}
/* 上面的写法规则和下面的效果是一样的： */
.menu, .footer {
border: 1px solid #ddd;
}登入後複製
嵌套规则
在css中嵌套class和ID是避免你的样式干扰或者被别的样式干扰的唯一方法了。但是这可能会很凌乱。使用一个类似于#site-body .post .post-header h2 的选择器毫无吸引力而且会占用大量不必要的空格。使用LESS，你可以嵌套id、class以及标签。对于前面提到的例子，你可以这样写：
#site-body { …
.post { …
.post-header { …
h2 { … }
a { …
&:visited { … }
&:hover { … }
}
}
}
}登入後複製
上面的代码最终和上面的例子（那一长串的选择器）的效果一样，但是要更容易阅读和理解的多，而且它占用很少的空间。你也可以通过&来引用元素样式到他们的伪元素上，该功能类似于JavaScript中的this。
运算
这可能是你所期望的：使用数字或者变量在你的样式表中实现数学运算！
@base_margin: 10px;
@double_margin: @base_margin * 2;
@full_page: 960px;
@half_page: @full_page / 2;
@quarter_page: (@full_page / 2) / 2;
登入後複製
声明下，我也意识到我可以除以4来获得@quarter_page变量，但是这里我只是想要演示下圆括号组成“运算顺序”在这里也是可以用的。在使用简写的规则中，小括号也是必须的，比如 border: (@width / 2) solid #000。
Sass在数字上比LESS更专业。它已经可以换算单位了。Sass可以处理无法识别的度量单位并将其输出。这个特性很明显是一个对未来的尝试——证明W3C作出的一些改变。
/* Sass */
2in + 3cm + 2pc = 3.514in
/* LESS */
2in + 3cm + 2pc = Error
登入後複製
Color函数
在文章开头，我提到了LESS如何帮我在编码过程中处理围绕着一个调色板。对此贡献最大的一部分就是颜色函数。加入你用一个标准的蓝色贯穿到你的样式中，然后你想要在表单中用这个蓝色来做一个渐变的按钮。你可以打开Photoshop或者其它的编辑器来获取一个比蓝色较浅的或者较暗的HEX色值来作为渐变色。或者，你可以只是使用LESS中的颜色函数。
@blue: #369;
.submit {
padding: 5px 10px;
border: 1px solid @blue;
background: -moz-linear-gradient(top, lighten(@blue, 10%), @blue 100%); /*Moz*/
background: -webkit-gradient(linear, center top, center bottom, from(lighten(@blue,10%)), color-stop(100%, @blue)); /*Webkit*/
background: -o-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%);/*Opera*/
background: -ms-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*IE 10+*/
background: linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*W3C*/
color: #fff;
text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
}登入後複製
lighten函数很明显就是用百分比值来减轻颜色，在这个例子中，它将减轻这个基础的蓝色的10%。这种方法可以让我们变化的元素或者其它任何元素的颜色值——只是简单的改变基础颜色而已。这对于主题(模板)来说非常有用。而且，如果你使用参数功能，像上面提到的，你还可以更简单的应用到一些浏览器私有前缀的声明中，比如：.linear-gradient(lighten(@blue), @blue, 100%);。
嗯，最终的效果的确很赞：
很赞的渐变的、基于变量的”Submit”按钮
还有很多其它的色彩函数，比如变暗或者调整颜色的饱和度，甚至你可以旋转色盘来使用其它颜色。我建议亲自尝试下你能想出的（用法）。
Sass貌似有更多的选项——但我并不需要这么多。我个人最常用的还是lighten和darken。如果你想了解更多，可以看一下这篇很详细的介绍。
条件语句与控制
这是一个的确很赞的东东，也是另一个LESS不支持的功能。使用 Sass，你可以使用if { } else { } 条件语句，以及for { }循环。它甚至支持 and、 or和 not，以及 <、 >、 <=、 >= 和 == 等操作符。
/* Sample Sass "if" statement */
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
/* Sample Sass "for" loop */
@for $i from 1px to 10px {
.border-#{i} {
border: $i solid blue;
}
}登入後複製
名字空间(Namespaces)
名字空间可以用于组织我们的CSS到另一个档次，我们可以将一些公用的样式分组，然后在用的时候直接使用。例如，如果我们创建了一个名为default的样式分组，我们就可以在用到的时候直接从该组中调用。
#defaults {
.nav_list () {
list-style: none;
margin: 0; padding: 0;
}
.button () { … }
.quote () { … }
}登入後複製
然后，在我们的代码中，如果我们正好在一个nav元素中使用了ul元素，我们就会想到我们需要default样式。那么我们就可以简单的调用它，它也会被直接应用。
nav ul {
#defaults > .nav_list;
}登入後複製
作用域
作用域是编程中的标配，LESS中也是。如果你在你样式表的root级声明一个变量，它在整个文档中都是可以用的。然而，如果你在一个选择器，比如id或者class中，重新定义了这个变量，那么，它就只能在这个选择器中可用了——当然是重新定义后的新值。
@color: #00c; /* 蓝色 */
#header {
@color: #c00; /* red */
border: 1px solid @color; /* 红色边框 */
}
#footer {
border: 1px solid @color; /* 蓝色边框 */
}登入後複製
因为我们在#header中重新定义了color变量，变量的值将会是不同的而且只会在该选择器中有效。它之前或者之后的所有地方，如果没有被重新定义，都会保持那个原始的值。
作用域在Sass中稍有不同。在上面的代码中，当@color变量变为红色后，代码中，此处之后的该变量的值，将会被重写（成为红色）。
注释
这一部分比较基础。LESS中允许两种注释写法。标准的CSS注释，/* comment */，是有效的，而且能够通过处理并正确输出。当行注释，// comment，同样可以用但是不能够通过处理也不能被输出，然后，结果是，“无声的”。
导入
导入也相当符合标准。标准的 @import: ‘classes.less’; 处理的很好。然而，如果你想要导入其它的LESS文件，那么文件的扩展名是可选的，所以 @import ‘classes’; 也是可行的。如果你想要导入一些无需LESS处理的内容，你可以使用 .css 扩展 (比如， @import: ‘reset.css’;)。
字符串插入
字符串也是可以用于变量中的，然后通过@{name}来调用。
@base_url : 'www.qianduan.net';
background-image: url("@{base_url}/images/background.png");
转义(Escaping)
可能偶尔会需要引入一个CSS中非法或者LESS无法识别的值。通常是一些IE的hack。要避免抛出异常并破坏LESS，你将需要避开它们。
.class {
filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";
}
/*实际上将会输出下面的代码: */
.class {
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);
}登入後複製
JavaScript 赋值
这是LESS中我最中意的部分：在样式表中使用Javascript——相当精彩。你可以使用表达式，也可以参考环境方向来使用反单引号。
@string: `'howdy'.toUpperCase()`; /* @string 变成 'HOWDY' */
/* 你也可以使用前面提到的插值： */
@string: 'howdy';
@var: ~`'@{string}'.topUpperCase()`; /* 变为 'HOWDY' */
/* 获取文档的信息 */
@height = `document.body.clientHeight`;登入後複製
输出格式
然而LESS并没有输出设置，而Sass提供4中输出选项：nested, compact, compressed 和 expanded。
结束语
这两个方法有很多共同点。对写代码的设计师来说，它们都是很酷的工具，它们也可以帮助开发者更有效和快速的工作。如果你是koala或HTML的粉丝，那么Sass会是你的好助手。对我来说，一个PHP和JavaScript极客，我倾向于LESS，因为它便于引入和能够使用JavaScript的表达式以及文档属性。我怀疑我甚至接近真正理解在样式表中编程的可能行了，但是我仍坚持尝试。如果你在工作中有用到它们中的一个，或者两个都用，我很乐意听到关于它的更多内容，并看到你的成果。当然，技巧、诀窍、更正一直是很欢迎的。
【相关推荐】
1. 免费h5在线视频教程
2. HTML5 完整版手册
3. php.cn原创html5视频教程
以上是ESS和Sass的基本特性及區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！
