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

然后在您设置颜色的笔中，将其更改为继承。所以你的说法是，“管理员背景是浅蓝色的颜色，颜色是浅蓝色。现在.panel内的文字内容，从父母继承你的颜色。”

.panel {
    a {
        color : inherit;
    }
}

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

此外，最好不要对选择器过于具体。在父项上设置颜色后，默认情况下，span和.good-bye实际上会继承颜色。所以你真正需要强制继承风格的是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;
}

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

2 个答案: