Sass嵌套

Posted 心欲无痕

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Sass嵌套相关的知识,希望对你有一定的参考价值。

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

 

  

  避免选择器嵌套:

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

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

以上是关于Sass嵌套的主要内容,如果未能解决你的问题,请参考以下文章

Sass--嵌套选择器

Sass 嵌套规则

Sass学习笔记 -- 嵌套

在嵌套的 mixin 中使用 SASS @each 变量

元素选择器中的 SASS 嵌套类选择器不起作用 [重复]

我们可以嵌套不会通过 Gulp 添加到编译输出的整体大小的媒体查询 (SASS) 吗?