一直使用的都是sass，公司提出新需求要用less，看了一下less的官方文檔，感覺記不住。在這我想用與sass的比較學習，加深印象。也希望可以幫助到一些人。
一、安裝sass與less
sass基于Ruby語言開發而成，因此安裝sass前需要安裝Ruby。（注:mac下自帶Ruby無需在安裝Ruby!）；
方法如下：
gem install sass、 gem install compass
less在服務器端最容易的安裝方式就是通過 npm （node.js 的包管理器），方法如下：
$ npm install -g less
less 在客戶端使用“.less”（LESS源文件），只需要在官網載一個javascript腳本文件主“less.js”，然后在我們需要引入LESS源文件的html的中加入如下代碼：
<link rel="stylesheet/less" type="text/css" href="文件路徑/styles.less">
<script src="文件路徑/less.js" type="text/javascript"></script>
二、變量
sass 是以$開頭定義的變量，如：$mainColor: #963;
less 是以@開頭定義的變量，如 @mainColor: #963;
三、作用域
sass 沒有全局變量，滿足就近原則，但是實際中可以將需要定義的全局屬性放在base.scss 文件中。注意變量名重復;
less 中的作用域和其他程序語言中的作用域非常的相同，他首先會查找局部定義的變量，如果沒有找到，會像冒泡一樣，一級一級往下查找，直到根為止。
四、混合（Mixins）
Sass的混合
sass樣式中聲明Mixins時需要使用“@mixin”，然后后面緊跟Mixins的名，他也可以定義參數，同時可以給這個參數設置一個默認值，但參數名是使用“$”符號開始，而且和參數值之間需要使用冒號（：）分開。
在選擇器調用定義好的Mixins需要使用“@include”，然后在其后緊跟你要調用的Mixins名。不過在Sass中還支持老的調用方法，就是使用加號“+”調用Mixins，在“+”后緊跟Mixins名。
一起來看個簡單的例子，比如說在你的Sass樣式中定義了一個名叫“error”的Mixin，這個“error”設置了一個參數“$borderWidth”，在沒特別定義外，這個參數的默認值設置為“2px”：
/*聲明一個Mixin叫作“error”*/
@mixin error($borderWidth:2px){
border:$borderWidth solid #f00;
color: #f00;
}
/*調用error Mixins*/
.generic-error {
@include error();/*直接調用error mixins*/
}
.login-error {
@include error(5px);/*調用error mixins，并將參數$borderWidth的值重定義為5px*/
}
less 的混合
在LESS中，混合是指將定義好的“ClassA”中引入另一個已經定義的“Class”，就像在當前的“Class”中增加一個屬性一樣。
不過LESS樣式中聲明Mixins和Sass聲明方法不一樣，他更像CSS定義樣式，在LESS可以將Mixins看成是一個類選擇器，當然 Mixins也可以設置參數，并給參數設置默認值。不過設置參數的變量名是使用“@”開頭，同樣參數和默認參數值之間需要使用冒號（：）分隔開。
正如Sass混合是的示例，同樣在LESS樣式中定義一個名叫“error”的Mixin，這個“error”設置了一個參數“@borderWidth”，在沒有特別定義外，這個參數的默認值是“2px”：
/*聲明一個Mixin叫作“error”*/
.error(@borderWidth:2px){
border:@borderWidth solid #f00;
color: #f00;
}
/*調用error Mixins*/
.generic-error {
.error();/*直接調用error mixins*/
}
.login-error {
.error(5px);/*調用error mixins，并將參數@borderWidth的值重定義為5px*/
}
五、嵌套
section {
margin:10px;
}
section nav {
height:25px;
}
section nav a {
color: #0982c1;
}
section nav a:hover {
text-decoration: underline;
}
==========================
section {
margin:10px;
nav {
height:25px;
a {
color:#0982c1;
&:hover {
text-decoration:underline;
}
}
}
}
六、繼承
sass的繼承：@extend
.block{
margin: 10px 5px;
padding: 2px;
}
p {
@extend .block;/*繼承.block選擇器下所有樣式*/
border: 1px solid #eee;
}
ul,ol {
@extend .block; /*繼承.block選擇器下所有樣式*/
color: #333;
text-transform: uppercase;
}
====================================
.block,p,ul,ol {
margin: 10px 5px;
padding:2px;
}
p {
border: 1px solid #eee;
}
ul,ol {
color:#333;
text-transform:uppercase;
}
less的繼承：類似于mixins
.block {
margin: 10px 5px;
padding: 2px;
}
p {
.block;/*繼承.block選擇器下所有樣式*/
border: 1px solid #eee;
}
ul,ol {
.block; /*繼承.block選擇器下所有樣式*/
color: #333;
text-transform: uppercase;
}
====================================>
.block {
margin: 10px 5px;
padding:2px;
}
p {
margin: 10px 5px;
padding:2px;
border: 1px solid #eee;
}
ul,ol {
margin: 10px 5px;
padding:2px;
color:#333;
text-transform:uppercase;
}
