Sass学习之路(6)——嵌套

Sass中提供了嵌套的功能，让样式代码显得非常有层次感，可以将选择器，样式等按层级一层一层嵌套下去。

Sass嵌套分为3种：

1.选择器嵌套：

比如这样一段HTML:

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

比如我们想给a标签设置样式,CSS的写法是这样的:

nav a {
  color:red;
}
/*或者*/
header nav a {
  color:green;
}

而在Sass中，我们使用选择器嵌套的方式书写:

nav {
  a {
    color: red;

    header & {
      color:green;
    }
  }  
}

这样的写法，层次还是非常清晰的。不过最好不要进行太多层次的嵌套，否则代码的可阅读性会变得不好。

tips:这里的header &中，&的作用是获取当前选择器，也就是它外边的 nav a，所以header&等同于header nav a


2.属性嵌套:

Css中有很多前缀相同，但是后置不一样的样式，比如marin-left,margin-right这样的，类似的还有pading,border之类的，这样的样式也可以使用属性嵌套一层层写出:

/*Css*/
.container {
    margin-left:5px
    margin-top:3px;
}

可以用属性嵌套写成:

.container {
  margin: {
   left:5px;
   top:3px;
  }
}

3.伪类（伪元素）嵌套:

伪类嵌套通常需要借助'&'符号一起使用,'&'为最近选择器，顾名思义，就是它会代表自身上级最近的一个选择器。

例如一段清除浮动的CSS:

clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
  overflow: hidden;
}

使用Sass的伪类嵌套书写：

.clearfix{
&:before,
&:after {
    content:"";
    display: table;
  }
&:after {
    clear:both;
    overflow: hidden;
  }
}

不得不说，如果三种嵌套混合使用，会变得非常难以阅读。所以使用嵌套要慎重呀，不能过度使用。