Less與Sass框架

1、Less語法

　　1.變量聲明：

　　　　@變量名:變量值; 

1 @newHeight:20px;

　　2.調用變量：

1 .box {
2     width: @newHeight;
3     height: @newHeight;    
4 }

　　3.多重繼承（Mixins）：調用已有的類做爲本身成員

1 .box1 {
2     .box;
3 }

　　4.帶參數函數：

1 .newBox(@newWidth) {
2     height: @newWidth;
3 }
4 .box2 {
5     .newBox(20px);
6 }

　　5.嵌套：（CSS中不能存在嵌套）

1 .box1 {
2     height: 200px;
3     width: 100px;
4     .box2 {
5         height: 200px;
6         width: 50px;
7     }
8 }

 1 /*如下兩種格式的代碼實現的是同一種效果*/
 2 a {
 3     &:hover {
 4         color: red;
 5     }
 6 }
 7 
 8 a:hover {
 9     color: red;
10 }

2、Sass/Scss語法

　　Sass省去了CSS中的做爲表示做用域的花括號{}和語句末尾的分號; ，改用縮進和換行；以「.sass」結尾的文件；

　　Scss也是Sass的一種形式，它的語法中使用{}和;，變量使用$聲明；一般通常用Scss，以「.scss」結尾的文件。

　　1.變量聲明和調用：

1 /*聲明*/
2 $newWeight: 30px;
3 /*調用*/
4 .box {
5     width: $newWeight;
6 }

　　2.屬性嵌套：

 1 /*將box1的border設置爲1px solid red的邊框*/
 2 .box1 {
 3     wiodth: $newWeight;
 4     border: {
 5         top: 1px solid red;
 6         right: 1px solid red;
 7         bottom: 1px solid red;
 8         left: 1px solid red;
 9     }
10 }

　　3.混合宏：

 1 /*聲明不帶參數的混合宏*/
 2 @mixin newName {
 3     width: 50px;
 4 }
 5 /*調用不帶參數的混合宏*/
 6 .box {
 7     @include newName;
 8 }
 9 /*聲明帶參數的混合宏*/
10 @mixin newName($newColor) {
11     background-color: $newColor;
12 }
13 /*調用帶參數的混合宏*/
14 .box2 {
15     @include newNmae(red);
16 }

　　4.繼承：

1 .global {
2                 
3     outline: 1px solid red;
4 }
5 /*繼承使用extend*/
6 input[type="text"] {
7     color: yellow;
8     @extend .golbal;
9 }

　　5.佔位符：

1 %test {
2     width: 20px;
3 }
4 .box {
5     @extend %test;
6 }

　　用佔位符聲明的類，若一直沒有調用，則不會在編譯後的「.css」文件中存在佔位符的類。