Sass 继承

前言

• @extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。

1、@extend

• 如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @extend 就显得很有用。

• 以下 Sass 实例中，创建了一个基本的按钮样式 .button-basic，接着我们定义了两个按钮样式 .button-report 与 .button-submit，它们都继承了 .button-basic ，它们主要区别在于背景颜色与字体颜色，其他的样式都是一样的。

  .button-basic  {
    border: none;
    padding: 15px 30px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
  }
  
  .button-report  {
    @extend .button-basic;
    background-color: red;
  }
  
  .button-submit  {
    @extend .button-basic;
    background-color: green;
    color: white;
  }

• 将以上代码转换为 CSS 代码，如下所示。

  .button-basic, .button-report, .button-submit {
    border: none;
    padding: 15px 30px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
  }
  
  .button-report  {
    background-color: red;
  }
  
  .button-submit  {
    background-color: green;
    color: white;
  }

• 使用 @extend 后，在 HTML 按钮标签中就不需要指定多个类 class=”button-basic button-report”，只需要设置 class=”button-report” 类就好了。

• @extend 很好的体现了代码的复用。