Sass

1.变量：
Sass:$定义
Less:@定义
2.注释
Sass:单行删除，多行保留（注释有汉字时，需添加UTF-8编码）
Less:单行删除，多行保留
3.属性嵌套（必须在复合属性中使用如：margin border...）
Sass:要加:,如
border:{
top:{
width:2px;
}
}
Less:无
4.混合：复用一组样式
Sass:
定义语法：  @mixin 混合名称
使用混合：@include 混合名称
>混合中使用的变量
  与定义混合时出现的位置有关（就近原则）
  与使用混合时出现的位置无关
>混合传参：如果没有定义默认参数，使用时必须要传参，定义了，使用时不加为默认参数（此时参数集合即括号可有可无）
//定义混合
    @mixin border($color:#ffff00){
        background: $color;
    }
    //调用混合
    .a{
      @include border;  
    }
    .b{
      @include border(#ff0000);  
    }
    .c{
      @include border(#dd2233);  
    }
    .d{
      @include border(#ff8855);  
    }
Less:
定义语法：  直接混合名称
使用混合：  直接混合名称
5.获取剩余参数
Sass: 语法  $arg...（该语法不仅可以获取全部参数，还可以获取参数的一部分）
//---获取剩余参数1----
@mixin box-shadow($arg1,$arg2){
     box-shadow:$arg1,$arg2;
     -webkit-box-shadow:$arg1,$arg2;
     -moz-box-shadow:$arg1,$arg2;
     -o-box-shadow:$arg1,$arg2;
}
.box3{
    width: 500px;
    height: 200px;
    margin: 100px auto;
//  box-shadow: 1px 2px 5px red,10px 20px 8px green;
    @include box-shadow(1px 2px 5px red,10px 20px 8px yellowgreen);
}

//---获取剩余参数2----
@mixin box-shadow($arg...){
     box-shadow:$arg;
     -webkit-box-shadow:$arg;
     -moz-box-shadow:$arg;
     -o-box-shadow:$arg;
}
.box3{
    width: 500px;
    height: 200px;
    margin: 100px auto;
//  box-shadow: 1px 2px 5px red,10px 20px 8px green;
    @include box-shadow(1px 2px 5px red,10px 20px 8px yellowgreen,30px 40px 10px blue);
}

//---获取剩余参数3----
@mixin box-shadow($h,$arg...){
    height: $h;
     box-shadow:$arg;
     -webkit-box-shadow:$arg;
     -moz-box-shadow:$arg;
     -o-box-shadow:$arg;
}
.box3{
    width: 500px;
    height: 200px;
    margin: 100px auto;
//  box-shadow: 1px 2px 5px red,10px 20px 8px green;
    @include box-shadow(500px,1px 2px 5px red,10px 20px 8px yellowgreen,30px 40px 10px blue);
}
Less:无（只有@arguments：获取所有属性）
6.继承：将被继承的选择器，复制到继承选择器中，复用样式
>在Sass中，混合相当于less中的方法
>在Sass中，继承相当于less中的混合
>在Sass中，支持的继承类型比较多：id继承，类继承，元素名称继承，自定义元素名称继承
>在Sass中，继承的定义，本质上就是在定义选择器
>使用继承：@extend 选择器名称
>声明前置：变量不能前置，混合不能前置，继承可以前置（可调用文件中任何位置定义的选择器来继承其样式）
>继承的样式会保留在页面中，有时候，我们不希望继承样式被保留，
使用继承占位符：%（只适用于元素名称选择器和自定义元素名称选择器）
//类继承1
    .red{color:red;}
    //id继承
    #width{width:300px;}
    //元素名称继承
    div{height: 50px;}
    //自定义元素名继承
    mystyle{background: green;}

    //使用继承
    h1{
        @extend .red;
        @extend #width;
        @extend div;
        @extend mystyle;
    }
编译后css结果：
.red, h1 {
  color: red;
}

#width, h1 {
  width: 300px;
}

div, h1 {
  height: 50px;
}

mystyle, h1 {
  background: green;
}
//使用继承占位符
    //类继承
    .red{color:red;}
    //id继承
    #width{width:300px;}
    //元素名称继承
    %div{height: 50px;}
    //自定义元素名继承
    %mystyle{background: green;}

    //使用继承
    h1{
        @extend .red;
        @extend #width;
        @extend %div;
        @extend %mystyle;
    }
//使用继承占位符结果：
.red, h1 {
  color: red;
}
#width, h1 {
  width: 300px;
}
h1 {
  height: 50px;
}
h1 {
  background: green;
}
>嵌套继承会导致很复杂的结果（三个结果），所以在工作中，尽量不要嵌套继承

7.作用域
一对{}创建了一个模块
变量：
定义在全局，任何模块都能使用
定义在模块内，只能在当前模块使用
就近原则
不能声明前置（先定义再使用）
混合：
定义在全局，任何模块都能使用
定义在模块内，只能在当前模块使用
就近原则
不能声明前置（先定义再使用）
继承：
定义在全局，任何模块都能使用
定义在模块内，任何模块都能直接使用，但是如果嵌套，会有意想不到的结果
只要匹配都能继承
能够声明前置（任何地方（一个Scss）定义的选择器都能使用）
不能声明前置（先定义再使用）
8.数学运算：
LESS:
Sass:
>加减法同Less一样，都会对数据单位做转换
div{
height:1pt+1px;
height:1in-1px;
}
结果：
div {
  height: 1.75pt;
  height: 0.98958in;
}
>乘法：只能出现一个单位或者都没有单位（如：10*10px）
>除法：在Sass中触发除法必须满足三个条件之一
(单位不能出现在除数上，或者被除数有单位除数才可以加单位)
(单位不统一时，会做单位转化，尽量将单位统一)
  1.必须出现（）------width：（100px/10）
  2.必须出现变量或者方法的返回值
  1）$width=200px;
    div{width:$width/2}
  2)round(20.1px)/4
  3.是表达式的一部分
  100px/5-10px