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”文件中存在占位符的类。