删除嵌套 class 中的部分重复 SASS 代码

Question

我想用普通 CSS:

.reduit__search-input {
  border-width: 2px;
  border-style: solid;
  border-radius: 0% !important;
}
.reduit__search-input:not(.error--text), .reduit__search-input:not(.error--text) fieldset {
  border-color: var(--v-primary-base);
}

我是如何用SASS写的：

.reduit__search-input {
  border-width:2px ;
  border-style: solid;
  border-radius: 0% !important;
  &:not(.error--text) , &:not(.error--text) fieldset {
    border-color: var(--v-primary-base);
  }
}

我的问题：

如您所见，&:not(.error--text) 在 SASS 中重复了两次，我想知道是否有简化它的技巧？

Answer 1

您可以像父级别一样使用 &:not(.error--text) 并在嵌套选择器 (&, fieldset) 中使用它来省略重复代码：

.reduit__search-input {
  border-width:2px ;
  border-style: solid;
  border-radius: 0% !important;

  &:not(.error--text) {
    &, fieldset {
      border-color: var(--v-primary-base);
    }
  }
}

输出：

.reduit__search-input {
  border-width: 2px;
  border-style: solid;
  border-radius: 0% !important; }
  .reduit__search-input:not(.error--text), .reduit__search-input:not(.error--text) fieldset {
    border-color: var(--v-primary-base); }

另一种方式，你可以做下一步：

您可以尝试使用SASS Placeholder approach，如果使用占位符选择器扩展，border-primary-base将不会在CSS输出中呈现：

%border-primary-base {
  border-color: var(--v-primary-base);
}

.reduit__search-input {
  border-width:2px ;
  border-style: solid;
  border-radius: 0% !important;

  &:not(.error--text) {
    @extend %border-primary-base;

    fieldset {
      @extend %border-primary-base;
    }
  }
}

输出：

.reduit__search-input:not(.error--text), .reduit__search-input:not(.error--text) fieldset {
  border-color: var(--v-primary-base); }

.reduit__search-input {
  border-width: 2px;
  border-style: solid;
  border-radius: 0% !important; }

删除嵌套 class 中的部分重复 SASS 代码

Remove portion of duplicated SASS code in nesting class

css

sass