SASS: перезаписать var, если ниже специального класса тела

Question

возможно, я получил ошибку в своем дизайне, но мой SASS определяется следующим образом:

$Akzent: #6d998e; // green

// ........
a {
 color: $Akzent;
}

.section .foo {
  background-color: $Akzent;
}
// ... many more definitions that go back on $Akzent

Теперь у меня есть веб-страница, для которой нужен $ Akzent, чтобы иметь другой цвет.Я не могу перезаписать цветовой интервал $ Akzent, когда он находится под другим классом тела.

Я пробовал что-то вроде этого:

$Akzent: #6d998e; // default akzent (green)

body.page-aktzent-2 {
  $Akzent: #ff9900; // override akzent with orange
}

a {
 color: $Akzent:
}
// ........ more sass code

, но это не сработает.

Я не хочу переопределять все предыдущие определения, которые используют $ Akzent, чтобы теперь использовать другую переменную.

Как мне решить мою проблему, не переписывая все?

Смеси также, кажется, не дают мне никакого решения.

Попробовал это: Установите переменную вSass зависит от селектора , но это не подходит для моего текущего кода sass.

Answer 1

Полагаю, я могу понять подход, к которому вы идете. Я сделал что-то похожее для другой опции темы для страницы и просто добавил класс к телу.

В вашем случае ваша вторая "тема" будет иметь класс page-akzent-2, добавленный к body.

Лучший способ, который я найду, это добавить другую переменную для вас новым цветом и перезаписать ваш исходный цвет везде, где это необходимо, с помощью вложения:

$akzent:   #6d998e; // default akzent (green)
$akzent-2: #ff9900; // second akzent (orange)

a {
    color: $akzent:

    body.page-akzent-2 & {
        color: $akzent-2; // override akzent with orange
    }
}
// ........ more sass code

Answer 2

Вы можете попробовать это

<div class="block orange"></div>
<div class="block red"></div>

$Akzent: #6d998e !default;

.block {
  min-height: 10px;
  width: 100%;
  margin-bottom: 10px;
}

.orange {
  $Akzent: orange;
  background-color: $Akzent;
}

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

рабочая ссылка codepen здесь