less与sass

相同点：

         1.定义：css预处理语言

         2.可以定义变量和使用

         3.可以定义混合器（函数）和使用

         4.可以继承

         5.可以嵌套

         6.可以运算，加减乘除（对颜色也可以进行运算）

不同点：

1.     变量的定义：

a)      Less：         @变量名

b)      Sass：        $变量名

2.     变量的作用域

a)      全局变量： 整个文件

b)      局部变量： { }内

3.     函数的定义：

a)      Less：         函数名（[参数]）

b)      Sass：        @mixin 函数名（[参数]）

4.     函数的使用：

a)      Less：         函数名（[参数]）

b)      Sass：        @include 函数名（[参数]）

5.     继承

a)      Less：         继承后生成的css较冗余，会将继承的样式重复编写

b)      Sass：        继承后生成的css较为简洁，会以组的形式生成样式

Sass的特性：

1.     父选择器标识符：         &

2.     特殊变量（以变量作为属性）：    #{$变量名}

3.     多值变量：   一维数组/二维数组

a)      使用：         nth($变量名,n)  n：索引（从1开始）

4.     Map:    key+value

a)      配合循环使用

5.     跳出嵌套：   @at-root

a)      跳出单个嵌套：   @at-root 样式名{}

b)      跳出多个嵌套：   @at-root{

样式名1：{}

样式名2：{}

…

}

6.     占位选择器： %

a)      如果不调用则不会有多余的css文件

b)      通过@extend调用

7.     @if（@else）

8.     @for循环（类似for循环）

变量名from 1 through 3{

…

}

9.     @each循环（类似for … in循环）

@each 变量名 in 变量名{

}