Less与Sass框架

一、Less语法

　　1.变量声明：

　　　　@变量名:变量值;

 @newHeight:20px;

　　2.调用变量：

 .box {
     width: @newHeight;
     height: @newHeight;
 }

　　3.多重继承（Mixins）：调用已有的类作为自己成员

 .box1 {
     .box;
 }

　　4.带参数函数：

 .newBox(@newWidth) {
     height: @newWidth;
 }
 .box2 {
     .newBox(20px);
 }

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

 .box1 {
     height: 200px;
     width: 100px;
     .box2 {
         height: 200px;
         width: 50px;
     }
 }

 /*以下两种格式的代码实现的是同一种效果*/
 a {
     &:hover {
         color: red;
     }
 }

 a:hover {
     color: red;
 }

二、Sass/Scss语法

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

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

　　1.变量声明和调用：

 /*声明*/
 $newWeight: 30px;
 /*调用*/
 .box {
     width: $newWeight;
 }

　　2.属性嵌套：

 /*将box1的border设置为1px solid red的边框*/
 .box1 {
     wiodth: $newWeight;
     border: {
         top: 1px solid red;
         right: 1px solid red;
         bottom: 1px solid red;
         left: 1px solid red;
     }
 }

　　3.混合宏：

 /*声明不带参数的混合宏*/
 @mixin newName {
     width: 50px;
 }
 /*调用不带参数的混合宏*/
 .box {
     @include newName;
 }
 /*声明带参数的混合宏*/
 @mixin newName($newColor) {
     background-color: $newColor;
 }
 /*调用带参数的混合宏*/
 .box2 {
     @include newNmae(red);
 }

　　4.继承：

 .global {

     outline: 1px solid red;
 }
 /*继承使用extend*/
 input[type="text"] {
     color: yellow;
     @extend .golbal;
 }

　　5.占位符：

 %test {
     width: 20px;
 }
 .box {
     @extend %test;
 }

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