如何通过覆盖来禁用SCSS属性？

Question

如何在background-color中停用.button.search，以便它可以回退到$red值？我不能删除它;我只能覆盖它。

我有

.button {
background-color: {$red};
}

和

.button.search {
background-color: #000;
}

Answer 1

不需要search中的任何其他设置。

.button {
  background-color: $red;
}
.button.search {
  /* no background-color setting would fallback to $red*/
}

Answer 2

我会这样做，这样你就可以 .search 扩展这个风格，并且无论你定义什么，它总是会后退，并且你想拥有它.active类的新值，您可以在 background-color: green;

之后写出@extend .search;

.search {
  background-color: red;

&.active {
 @extend .search;
 // background-color: green;
 }
}

结果将是那样的

.search, .search.active {
   background-color: red;
}

如果你愿意的话

.search {
  background-color: red;

&.active {
 @extend .search;
  background-color: green;
 }
}

结果将是那样的

.search, .search.active {
  background-color: red;
}
.search.active {
  background-color: green;
}