sass 变量的声明 嵌套

sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。

$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
    line-height: $baseLineHeight;
}
编译后的css代码：
body{
    line-height:2;
}

全局变量和局部变量

全局变量是定义在外面的变量

局部变量是定义在括号里面的变量，在局部里面调用同名变量，就是在调用局部变量，布局变量不会污染外面的全局变量

Sass 的嵌套分为三种：

• 选择器嵌套
• 属性嵌套
• 伪类嵌套

  假设我们有一段这样的结构：
  <header>
  <nav>
      <a href=“##”>Home</a>
      <a href=“##”>About</a>
      <a href=“##”>Blog</a>
  </nav>
  <header>
  那么在 Sass 中，就可以使用选择器的嵌套来实现：
  nav {
    a {
      color: red;
  
      header & {
        color:green;
      }
    }
  }
  &是取父值
  他的父亲是 nav a
  所以header & = header nav a

  Sass 中还提供属性嵌套，CSS 有一些属性前缀相同，只是后缀不一样，比如：border-top/border-right，与这个类似的还有 margin、padding、font 等属性。假设你的样式中用到了：
  .box {
      border-top: 1px solid red;
      border-bottom: 1px solid green;
  }
  在 Sass 中我们可以这样写：
  .box {
    border: {
     top: 1px solid red;
     bottom: 1px solid green;
    }
  }

  伪类嵌套。&：before 或 &：after
  
  .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;
  }