一、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 }

{ 3 &:hover { 4 color: red; 5 } 6 } { 9 color: red; 10 }

二、Sass/Scss语法

　　Sass省去了CSS中的作为表示作用域的花括号{}和语句末尾的分号; ，改用缩进和换行；以“.sass”结尾的文件；

　　Scss也是Sass的一种形式，它的语法中使用{}和;，变量使用$声明；通常一般用Scss，以“.scss”结尾的文件。

　　1.变量声明和调用：

$newWeight: 30px; { 5 width: $newWeight; 6 }

　　2.属性嵌套：

{ 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.混合宏：

{ 3 width: 50px; 4 } { 7 @include newName; 8 } { 11 background-color: $newColor; 12 } { 15 @include newNmae(red); 16 }

　　4.继承：

1 .global { : 1px solid red; 4 } { 7 color: yellow; 8 @extend .golbal; 9 }

　　5.占位符：

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

　　用占位符声明的类，若一直没有调用，则不会在编译后的“.css”文件中存在占位符的类。