Sass @extend



  • 定义和使用

    @extend 指令使您可以将一组 CSS 属性从一个选择器共享到另一个选择器。
    如果您具有几乎相同样式的元素,但仅在一些小细节上有所不同,则 @extend 指令很有用。
  • 示例

    下面的 Sass 示例首先为按钮创建一个基本样式(此样式将用于大多数按钮); 然后,我们为“报告”按钮创建一种样式,为“提交”按钮创建一种样式; “Report” 和 “Submit” 按钮都通过 @extend 指令从 .button-basic 类继承所有 CSS 属性;此外,它们还定义了自己的颜色:
    .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 代码中为元素指定多个类,例如:<button class =“ button-basic button-report”> 报告此 </button>;您只需要指定 .button-report 即可获得两组样式。
    @extend 指令有助于使您的 Sass 代码保持非常干燥。