时间戳

首页 > 解决方案 > SASS：在特殊的身体类下覆盖 var

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

问题描述

也许我的设计失败了，但我的 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。

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

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

试过这个：根据选择器在 Sass 中设置一个变量，但这不适合我当前的 sass 代码。

标签： variablessass

解决方案

你可以试试这个

<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链接在这里

推荐阅读