Sass嵌套规则与@extend继承

目录

一、 Sass嵌套规则

二、@extend继承

---

一、 Sass嵌套规则

        使用嵌套规则书写样式的时候依赖于HTML的结构。我认为应该用在“小结构中”不应该用在“大结构中”。所谓的小结构就是我们封装了一个小组件，它的结构已经确定了而且它嵌套样式影响的范围比较小，不近可以简化样式写法，也方便去维护。相反，如果你在一个页面从头到尾都使用嵌套规则书写样式，虽然当时挺轻松，不应去定义很多类名，但是对于后期样式方面的调整还是比较繁琐的。

嵌套规则写法：

<div class="box">
    <ul>
        <li>
            <a href="https://mp.csdn.net/" />
        </li>
    </ul>
</div>


.box {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    width:100px;
    height: 30px;
    text-decoration: none;
  }
}


// 如下是编译后的CSS文件
.box ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.box li {
  display: inline-block;
}
.box a {
  display: block;
  width:100px;
  height: 30px;
  text-decoration: none;
}

Sass嵌套属性

        在CSS属性中很多都有同样的前缀，例如：font-family, font-size 和 font-weight ， text-align, text-transform 和 text-overflow。在Sass中可以通过嵌套属性进行编辑。建议这种前缀一样的多的时候采用这种写法，方便维护，要是单单就一个就没必要多此一举了。

二、@extend继承

        @extend继承允许我们完全的去继承一个选择器所定义的样式。有了 @extend ，我们就不需要在 HTML 标签中指定多个类 class="basic common" ，只需要设置 class="common" 类就好了。很好的体现了代码的复用。

.basic  {
  padding: 10px 20px;
  text-align: center;
}

.common  {
  @extend .basic;
  background-color: #EEEEEE;
}