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

发布于 2025-02-01 05:32:20 字数 688 浏览 2 评论 0原文

我想通过普通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);
  }
}

我的问题：

，您注意到＆amp;：：：：：：：：：：不是（.Error-text）在SASS中重复两次，我想知道是否有一个简化这一点的技巧？

原文

What i want to achieve with normal 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);
}

How i've written with 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);
  }
}

My question :

As you noticed &:not(.error--text) is repeated twice in SASS, I wonder if there is a trick to simplify this ?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

带刺的爱情 2025-02-08 05:32:20

您可以使用＆amp;：not（.error-text）喜欢父级，然后在嵌套的选择器（＆amp; 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); }

另一种方法，您可以下一步：

您可以尝试使用 nofollow noreferrer“ a>，如果使用占位持有人选择器扩展，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; }

You can use &:not(.error--text) like parent level and use it in nested selectors (&, fieldset) to omit code duplicates:

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

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

Output:

.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); }

Another way, you can do next:

You can try to use SASS Placeholder approach, in case of using placeholder selector to extend, border-primary-base will not render in CSS output:

%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;
    }
  }
}

Output:

.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; }

回复收藏 0 原文

~没有更多了~