CSS预处理器——sass（中篇：sass的使用）

【1】[Sass]声明变量
Sass 的变量包括三个部分：

• 声明变量的符号“$”
• 变量名称
• 赋予变量的值

$width:123px !default;
// $ 是变量声明符
// width 是变量名称
// 123px 是变量值

注释：值后面加上!default则表示默认值。

【2】[Sass]普通变量与默认变量
普通变量：定义之后可以在全局范围内使用。
默认变量：sass 的默认变量仅需要在值后面加上 !default 即可。sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。

$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
    line-height: $baseLineHeight; 
}

【3】[Sass]局部变量和全局变量
全局变量就是定义在元素外面的变量；
而定义在元素内部的变量是局部变量。

//SCSS
$color: orange !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)
.block {
  color: $color;//调用全局变量
}
em {
  $color: red;//定义局部变量
  a {
    color: $color;//调用局部变量
  }
}
span {
  color: $color;//调用全局变量
}

• 全局变量的影子
  当在局部范围（选择器内、函数内、混合宏内…）声明一个已经存在于全局范围内的变量时，局部变量就成为了全局变量的影子。基本上，局部变量只会在局部范围内覆盖全局变量。
• 什么情况下声明变量
• 该值至少重复出现了两次；
• 该值至少可能会被更新一次；
• 该值所有的表现都与变量有关（非巧合）

【4】[Sass]嵌套
关于各种嵌套的写法，看对比就知道sass嵌套的写法规则了。
Sass 的嵌套分为三种：

• 选择器嵌套

//css
nav a {
  color:red;
}

header nav a {
  color:green;
}

//Sass选择器嵌套 
nav {
  a {
    color: red;

    header & {
      color:green;
    }
  }  
}

• 属性嵌套

//css
.box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}

.box {
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
}

• 伪类嵌套

//css
clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
  overflow: hidden;
}

//Sass
.clearfix{
&:before,
&:after {
    content:"";
    display: table;
  }
&:after {
    clear:both;
    overflow: hidden;
  }
}

【5】[Sass]混合宏-声明混合宏
需要重复使用大段的样式时，使用 Sass 中的混合宏会高效很多。

1. 宏的声明

//@mixin是用来声明一个混合宏
//“ ($shadow...)” 括号里是宏的参数，宏不一定会有参数，根据实际情况而定，如果有多个参数可以使用...来代替
@mixin box-shadow($shadow...) {
  @if length($shadow) >= 1 {
    @include prefixer(box-shadow, $shadow);
  } @else{
    $shadow:0 0 4px rgba(0,0,0,.3);
    @include prefixer(box-shadow, $shadow);
  }
}

2. 宏的调用
   在实际调用中，其匹配了一个关键词“@include”来调用声明好的混合宏

button {
    @include box-shadow;
}

3. 宏的传参
   （1）不带值的参数

@mixin border-radius($radius){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}
//传参，代表“border-radius”的值为“3px”
@include border-radius(3px);

（2） 带一个值的参数
混合宏的参数传一个默认值

//$radius:3px，3px是一个默认值，后续在调用的时候可以改变，比如 @include border-radius(10%);
@mixin border-radius($radius:3px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

（3）传多个参数
比如：@mixin center($ width,$ height)
当混合宏传的参数过多之时，可以使用参数来替代。

【6】[Sass]扩展/继承
在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。

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

.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;//即是btn-primary类也有btn类设置的样式
}

.btn-second {
  background-color: orange;
  color: #fff;
  @extend .btn;//即是btn-second类也有btn类设置的样式
}

【7】占位符 %placeholder
%placeholder 声明的代码，不被 @extend 调用的话，不会产生任何代码.

//SCSS
//编译后产生的css文件没有%mt5，%pt5的内容
%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}

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

.block {
  @extend %mt5;

  span {
    @extend %pt5;
  }
}

注释：通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起。即编译后block，span，btn具有的相同的样式会被写在一起，

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

【8】什么时候使用占位符/混合宏/继承

【9】[Sass]注释
Sass的注释有两种方式：
1.使用“/* ”开头，“*/”结尾
这种注释方法在进行编译后会在css文件中显示；
2.使用“//”
这种注释方法在进行编译之后则不会在css文件中显示。