Sass嵌套

Posted 2020-10-10 心欲无痕

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

 

　　

　　避免选择器嵌套：

• 选择器嵌套最大的问题是将使最终的代码难以阅读。开发者需要花费巨大精力计算不同缩进级别下的选择器具体的表现效果。
• 选择器越具体则声明语句越冗长，而且对最近选择器的引用(&)也越频繁。在某些时候，出现混淆选择器路径和探索下一级选择器的错误率很高，这非常不值得。

　　为了防止此类情况，我们应该尽可能避免选择器嵌套。