Sass嵌套

Posted 2021-01-16 sunjuncoder

　　Sass 中还提供了选择器嵌套功能，但这也并不意味着你在 Sass 中的嵌套是无节制的，因为你嵌套的层级越深，编译出来的 CSS 代码的选择器层级将越深，这往往是大家不愿意看到的一点。

　　选择器嵌套为样式表的作者提供了一个通过局部选择器相互嵌套实现全局选择的方法，Sass 的嵌套分为三种：

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

　　1、选择器嵌套

　　假设我们有一段这样的结构：

　　<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;

    　　}
  　　}  
　　}

　　2、属性嵌套
　　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;
  }
}

 

　　3、伪类嵌套

　　其实伪类嵌套和属性嵌套非常类似，只不过他需要借助`&`符号一起配合使用。我们就拿经典的“clearfix”为例吧：

.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;
}