Sass继承

使用sass的时候，最后一个减少重复的主要特性就是选择器继承。选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现

.error {
  border: 1px solid red;
  background-color: #fdd;
}

.seriousError {
  @extend .error;
  border-width: 3px;
}

通常使用继承会让你的css美观、整洁。因为继承只会在生成css时复制选择器，而不会复制大段的css属性。

思考继承和混合的区别

继承的原理并不是通过样式属性的复制来实现的，而是通过选择器的复制实现的，所以跟混合相比，继承生成的 css 代码相对更少。

效果展示

<div id="content">
  <h1>1</h1>
  <p>2</p>
</div>

#content {
  h1 {
    color: red;
    border: 1px solid blue;
  }
  p {
    @extend h1;
    margin-bottom: 1.4em;
    border-width: 3px;
  }
}

轻松一刻 🎧

音乐

音乐

视频教程 🎥

A video

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。