less&sass

定義：

less是一種動態樣式語言，對css賦予了動態語言的特性，好比變量、繼承、運算、函數，既能夠運行在客戶端，也能夠運行在服務器端，依賴JavaScript

 

sass是一種動態語言，屬於縮排語法，比css多出不少功能，好比變量、嵌套、運算、混入、繼承、函數等，更容易閱讀；

sass與scss關係：sass的縮排語法，對於閱讀者很不直觀，所以sass對語法進行改良，sass3就變成scss，與原來的語法兼容，只是用{}取代了原來的縮進

 

爲何要使用less和sass：

 

由於css只是單純的屬性描述，並不具備變量、條件語句等，css的特性致使了它難組織和維護。

 

less與sass相同之處：

 

1.混入 class中的class

2.參數混入 能夠傳遞參數的class

3.嵌套規則 class中嵌套class，從而減小重複的代碼

4.運算 使用數學

5.顏色功能 能夠編輯顏色

6.名字空間

7.做用域-局部修改樣式

8.JavaScript賦值，在css中使用JavaScript表達式賦值

 

區別之處：

 

1.less基於JavaScript，是在客戶端處理的

 

        不少開發者不會選擇Less由於javaScript引擎須要額外的時間來處理代碼而後輸出修改過的Css到瀏覽器， 【解決：只在開發階段使用Less,一旦開發完成，複製Less輸出的到一個壓縮器，而後用一個單獨的css文件來代替Less文件；另外一種方式是使用Less App來編譯和壓縮你的Less文件；這兩種方式都是最小化樣式輸出】

 

2.sass是基於ruby的，是在服務器端處理的

 

變量在less和sass中惟一的區別就是，less使用@，sass使用$

 

3.變量、使用方面的區別

 

less:

1.變量： 使用@變量名：變量值

2.混合：無參混合，代參混合

3.less的匹配模式，會根據調用時提供的條件只尋找與之匹配的mixins執行，其中@_表示永遠須要執行的部分

4.less中的運算，加減乘除可帶、可不帶單位；顏色運算時，分成綠藍三組進行運算，組內可進位，組間互不干涉

5.包含了傳進來的全部參數：border：@arguments；

6.less中的嵌套保留了html的代碼結構 1）嵌套默認是後代選擇器，若是須要子代選擇器，則在子代前加>2）.&表示上一層 &：表示上一層的hover事件

 

sass：

1.使用$變量名：變量值，若是變量須要須要在字符中嵌套，則需使用#加大括號包裹 ：border-#{$left}:10px solid #ccc;

2.會使用單位

3.嵌套：選擇器嵌套 僞類嵌套 屬性嵌套

選擇器嵌套 ul{li{}} 後代  ul{>li{}}子代  &表示上一級 屬性嵌套：屬性名與大括號之間必須有： border：{color：red}

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

 

①混合宏：聲明：@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循環結構：

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

@for $i from 1 through 10{} 包含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;

}