SASS

Question

我一直在尝试创建一个名为“$active”的变量，然后根据我们所在的 class，它正在更改此值。但它不起作用。显示代码

$active : #000 !default;

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

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

所以，通过这种方式，我虽然是根据 class 更改值，然后，将此颜色应用于 class。问题是，我在这两个 class 下有很多代码，我不能在没有逗号的情况下分配颜色，否则我会重复很多代码。

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

$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

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

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

Answer 2

我分叉了你的笔并做了一些小的调整。

我的做法是这样的：

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

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

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

然后在您设置颜色的笔中，将它们更改为继承。所以你的说法，"Admin background is a darker shade of lightBlue, and the color is lightBlue. Now text stuff inside of .panel, inherit your color from the parent."

.panel {
    a {
        color : inherit;
    }
}

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

此外，最好不要对选择器过于具体。在父项上设置颜色后，span 和.good-bye 实际上默认继承了颜色。所以你真正需要强制继承样式的是a。当然，这可能会根据您开发时出现的其他样式而改变，但最好保持简单，这样您就不会制作柴油选择器或使用 !important 来覆盖未来的东西。

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

SASS - change value of variable to use it in two classes

css

variables

mixins

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

SASS - change value of variable to use it in two classes

css

variables

sass

mixins

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