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