一、 !default

!default用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。

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

编译后的css代码：

body{
    line-height: 2;
}

---

如果没有" $baseLineHeight: 2; ",即：

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

那编译后的css代码：

body{
    line-height: 1.5;
}

二、&

1.由子嵌套到父元素

<header>
<nav>
    <a href=“##”>Home</a>
    <a href=“##”>About</a>
    <a href=“##”>Blog</a>
</nav>
<header>

想选中 header 中的 a 标签，在写 CSS 会这样写：

header a {
  color: red;
}

header nav a {
  color: green;
}

在sass中，可以从子反嵌套到父：

nav {
  a {
    color: red;

    header & {
      color:green;
    }
  }  
}

所以这里的&相当于加上前面的嵌套
header & ----> header + nav + a ----> header nav a

---

2.在伪元素嵌套也有用到“&”

CSS3 - ::before 伪元素
"::before" 伪元素可以在元素的内容前面插入新内容。
CSS3 - ::after 伪元素
"::after" 伪元素可以在元素的内容之后插入新内容。

h1::before
  {
  content:url(logo.gif);
  }
h1::after
  {
  content:url(logo.gif);
  }

在Sass中，把伪元素嵌套在类里，前面用“&”标识

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

编译出来的css

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

三、!global