Sass 带来的新特性

(1)变量

语法：$变量名: 值;

特殊：1、使用时：$不能省略;

2、可以创建局部变量，选择器{$局部变量名: 值;}

3、不区分中划线和下划线，都可以

(2)嵌套

.d1{
    d1的样式
    .d2{d2的样式
    &:hover{hover样式}
    }
    >.d3{d3的样式}
    }

编译后：

.d1{d1的样式}
.d1 .d2{d2的样式}
.d1 .d2:hover{hover样式}
.d1>.d3{d3的样式}

特殊：1、层级选择器不写的话，默认使用后代选择器（空格）

2、&：类似于javascript中的this，&包含在那个大括号里面就代表是谁

(3) 导入

@import：css也有，但是绝对不要再css使用，因为引入html后，js无法操作样式

但是scss可用:语法：@import "文件名"

(4)注释

需要使用多行注释

(5)混合器 1、创建混合器

@mixin 混合器名($形参:默认值,...){
			width:$形参;
		}

2、调用混合器

@include 混合器名();

特殊：1、没有传入实参，使用默认值；2、如果传入实参，则使用实参

何时使用：先写代码，碰到重复多了时，则封装为一个函数

(6)运算

尤其是颜色值可以进行运算

//#000000 - #ffffff
//黑（暗）      白（亮）
//0最小 - f最大
//乘以个1.x，一定会让此数字变大不断的靠近白色
//乘以个0.x，一定会让此数字变小不断的靠近黑色

2、Less：和Scss有两点不同：

(1)变量

@变量名:值; 需要区分中划线和下划线...

(2)混合器：

创建：

.混合器名(@形参:默认值,...){
      width: @形参;
      ...
}

使用：

div{
    .混合器名();
}

其余全部一样