Sass中的继承是通过@extend指令来实现的，它允许一个选择器继承另一个选择器的样式。了解继承的工作细节有助于更好地使用它并理解生成的CSS。

下面是继承的一些关键工作细节：

1. 生成的CSS规则： 继承不会简单地复制样式规则，而是创建一个新的CSS规则，该规则将源选择器的样式合并到目标选择器中。生成的CSS规则会包含源选择器和目标选择器的组合。
    .base {
      font-size: 16px;
      color: #333;
    }

    .child {
      @extend .base;
      font-weight: bold;
    }

    编译后的CSS：
    .base, .child {
      font-size: 16px;
      color: #333;
    }

    .child {
      font-weight: bold;
    }

2. 限制深度： 默认情况下，Sass会继承所有匹配的选择器，包括嵌套选择器。可以使用!optional标志来限制继承的深度，确保只有直接匹配的选择器会被继承。
    .box {
      width: 100%;

      &.wide {
        width: 50%;
      }
    }

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

    编译后的CSS：
    .box, .wide-box {
      width: 100%;
    }

    .wide-box {
      width: 50%;
    }

3. 占位符选择器： Sass提供了占位符选择器 %placeholder，它不会直接生成CSS规则，只有在被@extend时才会生成规则。这有助于避免在不同地方多次生成相同的样式规则。
    %base-button {
      padding: 10px 20px;
      font-size: 16px;
      text-align: center;
      cursor: pointer;
    }

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

    编译后的CSS：
    .primary-button {
      padding: 10px 20px;
      font-size: 16px;
      text-align: center;
      cursor: pointer;
      background-color: #3498db;
      color: #ffffff;
    }

4. 继承的顺序： 继承的顺序影响生成的CSS规则中选择器的顺序。在继承时，目标选择器（使用@extend的选择器）会出现在生成的规则的最前面。
    .base {
      font-size: 16px;
      color: #333;
    }

    .child {
      font-weight: bold;
      @extend .base;
    }

    编译后的CSS：
    .child, .base {
      font-size: 16px;
      color: #333;
    }

    .child {
      font-weight: bold;
    }

继承是一种强大的工具，但过度使用可能导致生成的CSS规则变得复杂，因此在使用时需要权衡灵活性和可维护性。理解继承的工作细节有助于更好地利用这个功能。


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