Variables SASS：在特殊主体类下覆盖var

也许我的设计失败了，但我的SASS定义如下：

$Akzent: #6d998e; // green

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

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

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

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

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

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

我试过这样的方法：

$Akzent: #6d998e; // green

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

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

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

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

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

但这行不通

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

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

混合似乎也不能给我带来任何解决方案

尝试此操作：但这不适合我当前的sass代码。

您可以尝试此操作

<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;
}

$Akzent:#6d998e！违约
.街区{
最小高度：10px；
宽度：100%；
边缘底部：10px；
}
.橙色{
$Akzent:橙色；
背景色：$Akzent；
}
瑞德先生{
$Akzent:红色；
背景色：$Akzent；
}

---

使用代码笔链接

我相信我可能理解您所采用的方法。我做了一些类似的事情，为页面提供了另一个主题选项，并简单地向主体添加了一个类

在您的情况下，您的第二个“主题”将在

正文中添加类
page-akzent-2

我找到的最佳方法是为您添加另一个变量新颜色，并覆盖嵌套所需的所有原始颜色：

$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

这对我没有任何帮助-我需要一种完全不同的颜色，而不仅仅是我给定默认口音的较轻版本-默认颜色是绿色，子页面需要橙色（#ff9900），因为$Akzentperhaps我不明白-但我认为这不会有帮助-这将迫使我拥有所有内容（页面上元素的每个类定义）在SASS中，对于子页面可能具有的每种颜色重音，都会出现两次。请始终记住，您的SASS代码不知道当前页面，因此它必须编译为CSS文件，该文件定义
a
的颜色和其他定义，并由所有可能的主体类包装。用于创建此类CSS代码的SASS机制包括混合、循环以及链接问题答案中描述的其他内容。您尝试的操作不会在所有其他定义周围产生额外的包装，而是覆盖给定范围内的变量。如果您不想接触现有代码，可以尝试使用
正文创建一个新的SCSS文件。page-akzent-2
包装，像在尝试中那样设置颜色，并在这个包装器中导入带有
a
等定义的文件（希望这在SASS中能起到某种作用，至少在更少的时间内能起到作用）。您将无法以您尝试的方式实现它。由于变量的作用域，您无法更改其作用域之外的变量值，因此，无论发生什么情况，
$Akzent
都将始终使用
a
中的默认颜色。请记住，
scss
是一个css处理器，因此值在运行时不会改变：您需要在css中定义规则。要实现您的示例，您需要定义一个基本
a
，再加上一个
body.page-akzent-2 a
。希望对您有所帮助！我来看看这能带我走多远，谢谢！我想我的问题是，我忘记了sass不是在页面的运行时编译的，而是以前编译过一次的，所以当然不可能对当前类集进行脚本编写和检查。。。很明显，我打破了sass的设计：/好吧，如果它对你有用的话，别忘了把这个标记为认可的答案：）我曾经认为你尝试的方式是一种整洁的方式，但这不是它的工作方式。