Sass

1.嵌套

#app {
  background-color: red;
  .box {
    font-size: 15px;
  }
}

可以避免写重复的父选择器

2.父选择器&

#app {
  width: 100px;
  &:hover {
    background-color: red;
  }
}

3.属性嵌套

#app {
  font: {
    family: fantasy;
    size: 16px;
    weight: bold;
  }
}

4.SassScript

1.变量$myWidth: 5em
将局部变量变为全局变量添加 !global声明

2.数据类型（6种）
数字：1，2，3，10px
字符串：有引号字符串与无引号字符串（"foo", "bar", baz）
颜色：blue，#04af93，rgba(0，0，0，0.5)
布尔值：false，true
空值：null
数组：用空格或者逗号作为分隔符：1.5em 1em 0.2em
maps：相当于JS中的Obj

3.插值语句#{}
通过插值语句#{}可以再选择器或属性名中使用变量

5.混合指令

@mixin large-text {
  font-size: 15px;
  position: absolute;
  left: 50%;
  transform: transition3d(-50%,0,0);
}

引用混合指令：
@import 'URL' 引入sass文件
@include 引用混合指令

函数：

@mixin page($position:absolute, $left){
  position: $position;
  left: $left
}