Question

我有一个名为.parent-form的父类，我想在子类中扩展它的一些规则，而不是所有规则。这在SASS可能吗？

.parent-form {
    padding: 20px 10px;

    .form-control:focus {
        border-color: #2BBBAD;
    }

    .row {
        /*some css rules goes here*/
    }
}

.child-form {
   @extend .parent-form;
  /* I only need padding and .form-control, but not .row */
}

有没有办法在sass中做那种事情？

Answer 1

您不能选择性地扩展课程中的规则而不取其他规则。但是你可以这样做：

.parent-form {
  padding: 20px 10px;
  .form-control:focus {
    border-color: #2BBBAD;
  }
}

.child-form {
  @extend .parent-form;
}

.needs-row {
  @extend .parent-form;
  .row {

  }
}

.child-form-with-row {
  @extend .needs-row;
}

或者，您可以使用mixin执行此操作：

@mixin need-row($needRow) {
  @extend .parent-form;
  @if $needRow == true {
    .row {

    }
  }
}

.child-form-with-row {
  @include need-row(true);
}

如何只将父类中的特定规则扩展到子类，而不是将它们全部扩展到sass中？

1 个答案: