Как отключить свойство SCSS, переписав его?

Question

Как можно отключить background-color в .button.search, чтобы оно вернулось к значению $red? Я не могу удалить это; Я могу только перезаписать это.

У меня есть

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

и

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

Answer 1

Я бы сделал это так, чтобы вы могли расширить стиль с .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;
}

Answer 2

Не требуется никаких дополнительных настроек в search.

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