一直使用的都是sass妆艘，公司提出新需求要用less看幼，看了一下less的官方文檔，感覺(jué)記不住桌吃。在這我想用與sass的比較學(xué)習(xí)，加深印象茅诱。也希望可以幫助到一些人瑟俭。
一契邀、安裝sass與less
sass基于Ruby語(yǔ)言開(kāi)發(fā)而成，因此安裝sass前需要安裝Ruby。（注:mac下自帶Ruby無(wú)需在安裝Ruby!）逗扒；
方法如下：
gem install sass欠橘、 gem install compass
less在服務(wù)器端最容易的安裝方式就是通過(guò) npm （node.js 的包管理器），方法如下：
$ npm install -g less
less 在客戶端使用“.less”（LESS源文件）黍檩，只需要在官網(wǎng)載一個(gè)javascript腳本文件主“l(fā)ess.js”，然后在我們需要引入LESS源文件的html的中加入如下代碼：
<link rel="stylesheet/less" type="text/css" href="文件路徑/styles.less">
<script src="文件路徑/less.js" type="text/javascript"></script>
二刽酱、變量
sass 是以$開(kāi)頭定義的變量瞧捌，如：$mainColor: #963;
less 是以@開(kāi)頭定義的變量，如 @mainColor: #963;
三衍慎、作用域
sass 沒(méi)有全局變量，滿足就近原則稳捆，但是實(shí)際中可以將需要定義的全局屬性放在base.scss 文件中麦轰。注意變量名重復(fù);
less 中的作用域和其他程序語(yǔ)言中的作用域非常的相同，他首先會(huì)查找局部定義的變量末荐，如果沒(méi)有找到，會(huì)像冒泡一樣甲脏，一級(jí)一級(jí)往下查找，直到根為止块请。
四拳缠、混合（Mixins）
Sass的混合
sass樣式中聲明Mixins時(shí)需要使用“@mixin”，然后后面緊跟Mixins的名窟坐，他也可以定義參數(shù)绵疲，同時(shí)可以給這個(gè)參數(shù)設(shè)置一個(gè)默認(rèn)值盔憨，但參數(shù)名是使用“$”符號(hào)開(kāi)始，而且和參數(shù)值之間需要使用冒號(hào)（：）分開(kāi)郁岩。
在選擇器調(diào)用定義好的Mixins需要使用“@include”芙盘，然后在其后緊跟你要調(diào)用的Mixins名。不過(guò)在Sass中還支持老的調(diào)用方法蝴乔，就是使用加號(hào)“+”調(diào)用Mixins，在“+”后緊跟Mixins名薇正。
一起來(lái)看個(gè)簡(jiǎn)單的例子囚衔，比如說(shuō)在你的Sass樣式中定義了一個(gè)名叫“error”的Mixin，這個(gè)“error”設(shè)置了一個(gè)參數(shù)“$borderWidth”猴仑，在沒(méi)特別定義外，這個(gè)參數(shù)的默認(rèn)值設(shè)置為“2px”：
/*聲明一個(gè)Mixin叫作“error”*/
@mixin error($borderWidth:2px){
border:$borderWidth solid #f00;
color: #f00;
}
/*調(diào)用error Mixins*/
.generic-error {
@include error();/*直接調(diào)用error mixins*/
}
.login-error {
@include error(5px);/*調(diào)用error mixins辽俗，并將參數(shù)$borderWidth的值重定義為5px*/
}
less 的混合
在LESS中篡诽，混合是指將定義好的“ClassA”中引入另一個(gè)已經(jīng)定義的“Class”，就像在當(dāng)前的“Class”中增加一個(gè)屬性一樣朱浴。
不過(guò)LESS樣式中聲明Mixins和Sass聲明方法不一樣，他更像CSS定義樣式翰蠢，在LESS可以將Mixins看成是一個(gè)類(lèi)選擇器，當(dāng)然 Mixins也可以設(shè)置參數(shù)躏筏，并給參數(shù)設(shè)置默認(rèn)值呈枉。不過(guò)設(shè)置參數(shù)的變量名是使用“@”開(kāi)頭，同樣參數(shù)和默認(rèn)參數(shù)值之間需要使用冒號(hào)（：）分隔開(kāi)酥泞。
正如Sass混合是的示例，同樣在LESS樣式中定義一個(gè)名叫“error”的Mixin芝囤，這個(gè)“error”設(shè)置了一個(gè)參數(shù)“@borderWidth”辛萍，在沒(méi)有特別定義外，這個(gè)參數(shù)的默認(rèn)值是“2px”：
/*聲明一個(gè)Mixin叫作“error”*/
.error(@borderWidth:2px){
border:@borderWidth solid #f00;
color: #f00;
}
/*調(diào)用error Mixins*/
.generic-error {
.error();/*直接調(diào)用error mixins*/
}
.login-error {
.error(5px);/*調(diào)用error mixins悯许，并將參數(shù)@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的繼承：類(lèi)似于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;
}
