首先我們來說一下Less。

 【Less中的變數】

1.宣告變數使用 @變數名：變數值；

2.使用變數 @變數名

less中的變數型別：

①數字類 1 10px ②字串：無引號字串 red 和有引號字串"gdak"

③顏色類 red #000000 rgb()

④值列表型別，用逗號或空格分隔

變數使用原則 ：

多次頻繁出現的值、需要修改的值設為變數

 3.混合（MiXins）

①無參混和宣告 ：.name{} 呼叫：選擇器中呼叫

②帶參混合

無預設值宣告： .name(@param){} 呼叫：.name(parValue); parValue不可以省略

有預設值宣告： .name(param:value()){} 呼叫：name(parValue)； parValue可以省略

無參混合會在CSS中編譯同名的class選擇器；有參的不會

 4.Less的匹配模式

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

宣告

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

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

.name(@_，引數){}

呼叫： .name(條件值，引數值)；

匹配規則：根據呼叫時提供的條件值，去尋找與之匹配的miXin執行,其中@_表示永遠需要執行的部分

 5.Less中的運算

*+-/可帶單位可不帶

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

 6.Less中的巢狀：保留HTML中的程式碼結構，

巢狀預設後代選擇器，如果需要子代選擇器，則在子代前面加>

&表示上一層，&：hover 表示上一層的hover事件

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

下面是sass

1. SASS中的變數

使用 $變數名：變數值 宣告變數

如果變數名需要在字串中巢狀，則需使用#加大括號包裹：

 2.sass中的運算會將單位也進行運算，使用時需注意最終單位：

例：10px*10px=100px*px

 3.sass中的巢狀： 選擇器的巢狀 屬性巢狀 偽類巢狀

選擇器的巢狀 ul{li{}}後代

ul{>li{}}子代

&表示上一層 div{ul{li{&=-=div ul li}}}

屬性巢狀 :屬性名與大括號之間必須有： 例如boder:{color:red;}

偽類巢狀: ul{li{&:hover{"ul li :hover"}}}

 4. 混合巨集、繼承、佔位符

①混合巨集：宣告@mixin name($param:value){}

呼叫：@include name(value)

》》宣告時，可以有參可以無參；可帶預設值，但呼叫必須符合生命規範

>>優點：可以傳參，不會生成同名class

>>缺點：會將混合巨集的程式碼copy到對於那個的選擇器中

②繼承： 宣告： .class{} 呼叫： @extend .class

>>優點：繼承的相同程式碼會提取到並集選擇器中，減少冗餘程式碼，

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

③佔位符：宣告：%class{} 呼叫： @extend %class

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

>>缺點：無法進行傳參

綜上所述：當要傳遞引數時用混合巨集，當有現成class時用繼承，不須引數不需class時候用佔位符

 5.if條件結構：

@if 條件{}

@else 條件{}

 6.for迴圈結構

@for $i from 1to 10{} 不含十；

@for $i from 1through 10{} 含十；

 7.while迴圈結構

$j:1;

@while $j<10{

.while井{$j}{

boder:井{$j}px solid red;

}

$j:$j+1;

}

 8.each迴圈遍歷

@each item ina,b,c,d{

//item 表示每一項

}

 9、函式：

@functionfunc($length){

$length:$length*5;

@return $length;

}

呼叫：func(10px);

 相信都能看出sass與less的不同了，定義變數Less用的是@符，Sass用的是$符當然，sass可以用if條件結構，迴圈結構，定義函式比less高大上了許多。所以一般還是用sass來寫，以備以後不時之需