03 【Sass语法介绍-嵌套】

Sass语法介绍-嵌套

1.前言

在企业的实际项目开发中，Sass 的嵌套可以说是非常非常有用的，它可以让你的 CSS 代码易于管理和维护，看起来也比较清晰，这也是 Sass 中很基础的一个知识点，首先掌握这个至关重要！在此章节我们将学习 Sass 嵌套中的嵌套规则、属性嵌套、父选择器和占位符选择器。Sass 嵌套式一个很基础也很简单的语法，关键在于要多多练习使用！

2.什么是嵌套？

在一般编写 CSS 的时候呢，我们一遍一遍的编写相同的选择器去处理深层级的样式，而 Sass 给你一种轻松的方式，你可以在一个样式规则中直接编写另一个样式规则，而不是重复相同的选择器，Sass 将自动组合内外部的选择器。

通俗点说就是：你可以在父选择器的样式中直接编写子元素的样式，同理你可以在一个子元素的样式中再去编写孙元素的样式，可以一层一层的嵌套着去写样式。

一般来说 Sass 中的嵌套应用于以下几种场景：

• 样式的嵌套
• 父选择器
• 占位符选择器
• 属性嵌套

3.样式的嵌套

3.1 基本使用

父选择器里可以嵌套子选择器

如：有以下标签

 <div>
        <ul>
            <li></li>
        </ul>     
    </div>

可以直接这样写：

div{
    height: 100px;
    ul{
        height: 80px;
        li{
           height: 50px;
        }
    }
}

相当于：

div {
  height: 100px;
}
div ul {
  height: 80px;
}
div ul li {
  height: 50px;
}

scss嵌套打开(解析)的规则是：从外层到内层，将嵌套规则块打开，父级的选择器放在子级选择的前面组成一个新的选择器，然后再循环打开内部的嵌套块处理。

写起来是不是方便很多，但使用嵌套的时候同时需要注意：

嵌套规则很有用很方便，但是你很难想象它实际会生成多少 CSS 语句，嵌套的越深，那么编译为 CSS 的语句就越多，同时消耗的资源也会越多，所以开发者尽量不要嵌套特别深的层级！

3.2 嵌套选择器列表 (Selector Lists)

css中，使用,分割的群组选择器可以同时应用样式在多个选择器上，如：

h1, h2 {
   
  margin: 0;
}

但是，如果想对一个特定的容器元素内的多个元素，使用群组选择器时，就会有很多重复性工作。

.container h1, .container h2, .container h3 {
    margin-bottom: .8em }

而，sass的