删除嵌套类中部分重复的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占位符方法，在使用占位符选择器扩展的情况下，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; }