SASS：在特殊的身体类下覆盖 var

Question

也许我的设计失败了，但我的 SASS 是这样定义的：

$Akzent: #6d998e; // green

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

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

现在我有一个网页需要 $Akzent 有另一种颜色。在另一个 body 类之下时，我无法覆盖 $Akzent 的颜色值。

我尝试过这样的事情：

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

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

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

但这行不通。

我不想将以前使用 $Akzent 的所有定义重新定义为现在使用另一个 var。

如何在不重写所有内容的情况下解决我的问题？

混合似乎也没有给我带来任何解决方案。

试过这个：Set a variable in Sass depending on the selector 但这不适合我当前的 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;
}

工作代码笔链接here