除了基本的选择器继承之外，Sass还提供了一些高级的继承用法，使其更加灵活。以下是一些高级用法：

1. 占位符选择器（Placeholder Selectors）： Sass提供了占位符选择器 %selector，它不会直接生成CSS，但可以被继承。这在创建可重用的样式块时非常有用。
    %base-button {
      padding: 10px 20px;
      font-size: 16px;
      text-align: center;
      cursor: pointer;
    }

    .primary-button {
      @extend %base-button;
      background-color: #3498db;
      color: #ffffff;
    }

    .secondary-button {
      @extend %base-button;
      background-color: #e74c3c;
      color: #ffffff;
    }

2. 继承多个选择器： 通过使用多个选择器，可以将多个选择器的样式合并到一个规则中。
    .alert {
      border: 1px solid #ff0000;
      color: #ff0000;
    }

    .error-message {
      @extend .alert;
      font-weight: bold;
    }

    .warning-message {
      @extend .alert;
      font-style: italic;
    }

3. 继承嵌套规则： 继承不仅限于普通选择器，还可以用于嵌套规则。
    .box {
      width: 100%;
      padding: 10px;
      box-sizing: border-box;

      &.wide {
        width: 50%;
      }
    }

    .wide-box {
      @extend .box.wide;
    }

4. 限制继承的深度： 使用@extend时，可以通过!optional标志来限制继承的深度，防止过度复杂的选择器。
    .box {
      width: 100%;
      padding: 10px;
      box-sizing: border-box;

      &.wide {
        width: 50%;
      }
    }

    .wide-box {
      @extend .box.wide !optional;
    }

这些高级用法增加了Sass继承的灵活性，使你能够更好地组织和重用样式。但要注意，使用继承时要小心，确保理解生成的CSS规则以及其对性能和可维护性的潜在影响。


转载请注明出处：http://www.zyzy.cn/article/detail/6185/SASS