Sass是最早的CSS预处理语言，比LESS更为强大

使用Ruby语言编写的一款CSS预处理器

CSS预处理器：Sass、LESS、Stylus

使用变量、简单的逻辑程序、函数，让CSS更简洁、适应性强、可读性好

sass编译的输出样式风格：

• 嵌套输出方式：nest

• 展开输出方式：expand

• 紧凑输出方式：compact

• 压缩输出方式：compressed
  

sass与scss的区别：

• 文件扩展名不同，sass是以.sass后缀为扩展名；而scss是以.scss后缀为扩展名

• 语法书写方式不同，Sass是以严格的缩进式语法规则来写，不带大括号和分号；而scss的语法与css类似。
  

//SCSS
p {
  font: 10px/8px;             // 纯 CSS，不是除法运算
  $width: 1000px;
  width: $width/2;            // 使用了变量，是除法运算
  width: round(1.5)/2;        // 使用了函数，是除法运算
  height: (500px/2);          // 使用了圆括号，是除法运算
  margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算
}

.box {
  width: (1000px / 100px);
}

编译出来的CSS如下：

.box {
  width: 10;
}

加减法，单位不同，报错。

sass值列表：

独立的值也被视为值列表。

(1px 2px)(3px 4px)是包含两个值列表的值列表。

1px 2px 3px 4px是包含四个值的值列表。

编译成css是一样的，但是在scss中意义不同。

()是空的列表，会报错。

值列表中包含空的值列表或空值，编译清除空值，

如1px 2px () 3px 或1px 2px null 3px。

列表函数：

nth函数：直接访问值列表中的某一项。

join函数：多个值列表连结在一起。

append函数：值列表中添加值。

@each规则：给值列表的每个项目添加样式。

编译css文件不改变类型，只有使用插值语句#{}有引号编译为无引号。

当deprecated = property syntax时，所有字符串都被编译为无引号字符串。

[Sass]混合宏 VS 继承 VS 占位符

[Sass]占位符 %placeholder

这段代码没有被 @extend 调用，他并没有产生任何代码块，只是静静的躺在你的某个 SCSS 文件中。只有通过 @extend 调用才会产生代码：

//SCSS


.btn {  
    @extend %mt5;
    @extend %pt5;
  }

.block {
  @extend %mt5;

  span {
      @extend %pt5;
  }
}

编译：

//CSS
.btn, .block {
  margin-top: 5px;
}

.btn, .block span {
  padding-top: 5px;
}

@extend 调用的占位符，编译出来的代码会将相同的代码合并在一起。

sass继承【@extend】：

//SCSS
.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;  
  
}

.btn-second {
  background-color: orange;
  color: #fff;  
  
}

继承类样式块中所有样式代码，而且编译出来的 CSS 会将选择器合并在一起，形成组合选择器：

混合宏最不足之处：

并不能智能的将相同的样式代码块合并在一起。

C) 传多个参数

@mixin center($width,$height){
  width: $width;
  height: $height;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -($height) / 2;
  margin-left: -($width) / 2;
}

.box-center {
  @include center(500px,300px);
}

.box-center {
  width: 500px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -250px;
}

  有一个特别的参数“…”。当混合宏传的参数过多之时，可以使用参数来替代，如：

@mixin box-shadow($shadows...){
  @if length($shadows) >= 1 {
    -webkit-box-shadow: $shadows;
    box-shadow: $shadows;
  } @else {
    $shadows: 0 0 2px rgba(#000,.25);
    -webkit-box-shadow: $shadow;
    box-shadow: $shadow;
  }
}

.box {
  @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
}

.box {
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
}

B) 传一个带值的参数

@mixin border-radius($radius:3px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

调用默认混合宏：

.btn {
  @include border-radius;
}

调用随机传值的混合宏：

.box {
  @include border-radius(50%);
}

A) 传一个不带值的参数

声明参数不带值的混合宏：

@mixin border-radius($radius){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

调用：

.box {
  @include border-radius(3px);
}

编译出：

.box {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}