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的定义现在使用另一个var。

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

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

尝试这个：Set a variable in Sass depending on the selector但这不适合我当前的sass代码。

Answer 1

你可以试试这个

<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

Answer 2

我相信我可能会理解你的方法。我做了类似的事情，为页面添加了另一个主题选项，并且只是在主体中添加了一个类。

在您的情况下，您的第二个“主题”会将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

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

2 个答案: