八.嵌套-选择器嵌套

Sass 的嵌套分为三种：
<ul>
<li>选择器嵌套</li>
<li>属性嵌套</li>
<li>伪类嵌套</li>
</ul>

html 结构：

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

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

nav a {
  color:red;
}
header nav a {
  color:green;
}

那么在 Sass 中，就可以使用选择器的嵌套来实现：

nav {
  a {
    color: red;

    header & {
      color:green;
    }
  }  
}

header & 表示 "&"公用之前的代码

header{ 
    nav {
          a{ color:green;}
    }
}

九属性嵌套

css 代码：

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

scss 代码：

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

总结：他不会自动合并相同的样式代码，如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码的冗余，这也是 CSSer 无法忍受的一件事情。不过他并不是一无事处，他可以传参数。
使用时间：代码块中涉及到变量，建议使用混合宏来创建相同的代码块。

总结：使用继承后，编译出来的 CSS 会将使用继承的代码块合并到一起，通过组合选择器的方式向大家展现
使用时间：如果你的代码块不需要专任何变量参数，而且有一个基类已在文件中存在，那么建议使用 Sass 的继承。

总结：编译出来的 CSS 代码和使用继承基本上是相同，只是不会在代码中生成占位符 mt 的选择器。那么占位符和继承的主要区别的，“占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码；继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中。

Paste_Image.png

总结_1：
三种存在即合理。占位符的好处是，不调用是不会编译出来的。混合宏的好处是，可以传参，但是编译出来的内容冗余。继承的好处是，对不要传参变动的内容继承后编译出来的内容，相同部分是在一起的，代码比较简洁规范。缺点是不能传参