CSS預處理語言——less與sass的使用

我們一般所使用的Less跟Sass一般是將其編譯成我們所熟悉的CSS再導入使用，當然不經編譯，直接在瀏覽器使用

我是習慣用Koala來進行編譯，簡單智能方便，Hbuilder也自帶編譯功能，不過要手動，比較麻煩

首先我們來說一下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;
}
section ul {
  padding: 0px;
  list-style: none;
}
section ul li {
  float: left;
  margin: 10px;
  width: 100px;
  text-align: center;
  border: 1px solid #000000;
}
section ul li:hover {
  background-color: yellowgreen;
}

當然，我們最看好less的一點可能就是它的嵌套了就像上邊要寫這么長的代碼，使用less來寫就如以下代碼所示，是不是看着舒服了很多，用編譯器編譯完就可以顯示為上邊代碼的樣子了

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 1 to 10{} 不含十；

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

7.while循環結構

$j:1;

@while $j<10{

.while井{$j}{

boder:井{$j}px solid red;

}

$j:$j+1;

}

8.each循環遍歷

@each item in a,b,c,d{

//item 表示每一項

}

9、函數：

@function func($length){

$length: $length*5;

@return $length;

}

調用：func(10px);

 

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