SASS -更改变量的值，以便在两个类中使用它

Question

我一直在尝试创建一个名为"$active“的变量，然后，它取决于我们所在的类，它正在改变这个值。但不起作用。给你看代码

$active : #000 !default;

.class-1 {
   $active : red;
}
.class-2 {
   $active : green;
}

.class-1, .class-2 {
   color: $active;
}

因此，以这种方式，我认为的是改变值取决于我们是类，然后，应用这个颜色的类。问题是，我在这两个类下有很多代码，没有逗号我不能分配颜色，否则我会重复很多代码。

而且，我发现了一些非常奇怪的东西，如果我这样写的话，这就是为什么在代码中不起作用的关键：

$active : #000 !default;

.class-1 {
   $active : red;
   color : $active; // Here it's working, red!
}
.class-2 {
   $active : green;
   color : $active; // Here it's working, green!
}

.class-1, .class-2 {
   color: $active; // No way to make it works! :(
}

你有什么想法吗？欢迎任何建议，谢谢！

顺便说一句，我已经试过使用Mixins和函数了，但这是一样的.

--编辑--

我想我说得不够清楚抱歉。我刚刚为这个例子创建了一支笔，上面有注释和所有的东西，以使之更清晰。从我的观点来看，我并不是在全局上下文中重写变量值，而是不确定它是否是这样的…

http://codepen.io/ialex90/pen/RaEyWx

Answer 1

我用叉子叉了你的笔，做了几次小调整。

我在这里的方法是：

不要将$activeColor重置为新的颜色，它只是没有必要。您要做的不是直接设置$user和$admin，而是跳过$activeColor上的设置。当您将背景色设置为div时，也要设置颜色。

.panel-user {
    background-color : darken( $user, 20% );
    color: $user;
}

.panel-admin {
    background-color : darken( $admin, 20% );
    color: $admin;
}

然后在你的笔中设置颜色，将它们更改为继承。所以你说：“管理背景是lightBlue的一个更深的颜色，颜色是lightBlue。现在，在.panel中的文本内容，继承您的颜色从父。”

.panel {
    a {
        color : inherit;
    }
}

这应该说明我的意思，http://codepen.io/maxinacube/pen/bpOXyX?editors=0100

另外，最好不要在你的选择器上说得太具体。在设置父项的颜色后，span和.话别实际上在默认情况下继承颜色。因此，您真正需要强制继承样式的是a。当然，这可能会发生变化，这取决于您开发的其他风格，但最好保持简单，这样您就不会制造柴油选择器或使用!important来覆盖未来的事情。

Answer 2

您可以使用颜色数组，并在循环此数组时设置单个颜色：

$colors: red, blue, orange;

@for $i from 1 through length($colors) {
  .color-#{$i} {
    color: nth($colors, $i)
  }
}

.color-1, .color-2 {
  color: #000;
}

它将汇编如下：

.color-1 {
  color: red;
}

.color-2 {
  color: blue;
}

.color-3 {
  color: orange;
}

.color-1, .color-2 {
  color: #000;
}