less與sass的區別

在介紹less和sass的區別以前，咱們先來了解一下他們的定義：

1、Less、Sass/Scss是什麼?

一、Less：

是一種動態樣式語言. 對CSS賦予了動態語言的特性，如變量、繼承、運算、函數。

Less 既能夠在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也可在服務端運行。

 

二、Sass：

是一種動態樣式語言，Sass語法屬於縮排語法，

比css比多出好些功能(如變量、嵌套、運算,混入(Mixin)、繼承、顏色處理，函數等)，更容易閱讀。

 

Sass與Scss是什麼關係?

Sass的縮排語法，對於寫慣css前端的web開發者來講很不直觀，也不能將css代碼加入到Sass裏面，所以sass語法進行了改良，Sass 3就變成了Scss(sassy css)。與原來的語法兼容，只是用{}取代了原來的縮進。

 

2、less和sass的相同之處

Less和Sass在語法上有些共性，好比下面這些：

一、混入(Mixins)——class中的class；

二、參數混入——能夠傳遞參數的class，就像函數同樣；

三、嵌套規則——Class中嵌套class，從而減小重複的代碼；

四、運算——CSS中用上數學；

五、顏色功能——能夠編輯顏色；

六、名字空間(namespace)——分組樣式，從而能夠被調用；

七、做用域——局部修改樣式；

八、JavaScript 賦值——在CSS中使用JavaScript表達式賦值。

 

3、less和sass的區別

 

Less和Sass的主要不一樣就是他們的實現方式。

Less是基於JavaScript，是在客戶端處理的。

Sass是基於Ruby的，是在服務器端處理的。

關於變量在Less和Sass中的惟一區別就是Less用@，Sass用$。

 

一、Less：

【兩種註釋方式】

①//less中的註釋，但這種不會被編譯

②

/*
 * 這也是less中的註釋，可是會被編譯
 */

 

【less中的變量】

一、聲明變量:

@變量名:變量值;

使用變量: @變量名

>>>less中變量的類型：

①數字類 1 10px 

②字符串：無引號字符串 red ;有引號字符串 "haha" 

③顏色類：red #000000 rgb() 

④值列表類型：用逗號和空格分隔 10px solid red

@length: 100px; @color:red; @opa:0.5; @border:10px solid red; .borderRadius(@brWidth:10px){ 　　border-radius: @brWidth;
}
.setMargin(lefts,@width){ 　　margin-left:@width;
}

>>>變量使用原則：

屢次頻繁出現的值、須要修改的值，設爲變量

二、混合(MiXins)

①無參混合

聲明：.name{}

選擇器中調用：.name;

②代參混合

無默認值

聲明：.name(@param){}

調用：.name(parValue);

有默認值

聲明：.name(@param:value){} 

調用：.name(parValue); //parValue可省

>>>若是聲明時，參數沒有默認值，則調用時必須賦值，不然報錯！

>>>無參混合，會在css中編譯除同名的class選擇器，有參的不會

三、less的匹配模式：

使用混合進行匹配，相似於if結構

聲明：

.name(條件一，參數){} 

.name(條件二，參數){} 

.name(@_,參數){}

調用：

.name(條件值，參數值);

匹配規則：根據調用時提供的條件值去尋找與之匹配的"MiXins"執行，其中@_表示永遠須要執行的部分

四、less中的運算

+ - * / 可帶、可不帶單位

顏色運算時，紅綠藍分三組計算，組內可進位，組間互不干涉

五、包含了傳進來的全部參數：

border:@arguments;

六、less中的嵌套：保留HTML中的代碼結構

①嵌套默認是後代選擇器，若是須要子代選擇器，則在子代前加>

②.&表示上一層 &:表示上一層的hover事件

section {
　　p {
　　　　color: red;
　　　　background-color: yellowgreen;
　　　　text-align: center;
　　}
　　ul {
　　　　padding: 0px;
　　　　list-style: none;
　　　　li {
　　　　　　float: left;
　　　　　　margin: 10px;
　　　　　　width: 100px;
　　　　　　text-align: center;
　　　　　　border: @border;
　　　　　　&:hover {
　　　　　　　　background-color: yellow;
　　　　　　}
　　　　}
　　}
}

二、Sass：

一、Sass中的變量

使用 $變量名：變量值，聲明變量；

若是變量須要在字符串中嵌套，則需使用#加大括號包裹；

border-#{$left}:10px solid blue;

二、Sass中的運算

會將單位也進行運算，使用時需注意最終單位例：10px*10px=100px*px

三、sass中的嵌套：

選擇器嵌套，屬性嵌套，僞類嵌套

選擇器嵌套 ：

　　    ul{ li{} } 後代
           ul{ >li{} } 子代
&:表示上一層 div{ ul{ li{ &=="div ul li" } } }

屬性嵌套：

屬性名與大括號之間必須有: 

例如:border:{color:red;}

僞類嵌套：ul{li{ &:hover{ "ul li:hover" } } }

四、混合宏、繼承、佔位符

①混合宏：

聲明：@mixin name($param:value){}

調用：@include name(value);

>>>聲明時，能夠有參，能夠無參；可帶默認值，也可不帶；可是，調用時，必須符合聲明規範。同less

>>>優勢：能夠傳參，不會生成同名class；

>>>缺點：會將混合宏中的代碼，copy到對應的選擇器中，產生冗餘代碼！

②繼承：

聲明：.class{}

調用：@extend .class;

>>>優勢：繼承的相同代碼，會提取到並集選擇器中，減小冗餘代碼

>>>缺點：沒法進行傳參，會在css中，生成一個同名class

③佔位符：

聲明：&class{}

調用：@extend %class;

>>>優勢：繼承相同代碼，會提早到並集選擇器；不會生成同名的class選擇器

>>>缺點：沒法進行傳參

綜上所述：當須要傳遞參數時，用混合宏；當有現成的class時用繼承；當不須要參數，也不須要class時，用佔位符

五、if條件結構：

@if 條件 {}
@else {}

六、for循環結構：

 

//不包含10;
@for $i from 1 to 10{} 
//包含10;
@for $i from 1 through 10{} 

 

七、while循環結構：

$j: 1;
@while $j<10 {
　　.while#{$j} {
　　　　border: #{$j}px solid red;
　　}
　　$j: $j+1;
}

八、each循環遍歷

@each item in a,b,c,d{
//item表示每一項
}

九、函數：

@function func($length) {
　　$length1: $length*5;
　　@return $length1;
}
//調用：
func(10px);

十、使用...將傳進來的全部參數，接收到一個變量中

@mixin bordeRadius($param1...) {
　　//使用...將傳進來的全部參數，接收到一個變量中
　　border-radius:$param1;
　　-webkit-border-radius:$param1;
}

轉自http://www.cnblogs.com/hope666/p/6791790.html