Question

在SASS中创建颜色方案时，用于定义颜色的常规变量名称是什么？

我知道使用颜色名称很糟糕。如：

$blue
$red
$green

但我没有看到另一种选择。我正在努力为网站上的颜色变量名称传达意义。

有什么想法吗？

Answer 1

我在"SASS & Color Variables" article找到了另一个想法。解决方案建议由Sacha Greif 使用一些变量来存储描述性颜色名称，另外一些则将这些颜色分配给它们的函数：

 // first we set descriptive variables:
 $darkgrey: #333333;
 $blue: #001eff;

 // then we set functional variables:
 $text_color: $darkgrey;
 $link_color: $lightblue;
 $border_color: $lightblue;

 .myClass {
   color: $text_color;
   border-color: $border_color;
 }

 a {
   color: $link_color;
 }

我刚开始使用SASS而且不知道哪种方法更实用，但我喜欢它将颜色与功能分开的方式。

Answer 2

根据我的个人经验，命名颜色最有用的方法是根据颜色的功能进行操作，例如

$背景
$对比度
$文本
$预留
$链路

等等。当然哪种颜色和名称可能取决于设计。

然后，您可以在不同的样式上定义不同的可交换颜色方案，例如：

_dark_scheme.scss
_light_scheme.scss
_pastels.scss

这里的想法是，您可以在主样式表中使用相同的颜色变量，而不依赖于特定的颜色。

Answer 3

我喜欢将generic to specific naming（适合代码完成）和description/functional naming结合使用的想法。所以你有这样的事情：

 // Descriptive naming
 $color-gray-light: #f3f3f3;
 $color-gray-dark: #999999;
 $color-red: red;

 // Functional naming
 $link-color: $color-red;
 $link-border-color: $color-gray-light;

Answer 4

你甚至可以为灰色创建一个mixin（在示例中，RGBA用于透明度，例如，如果红色背景上的黑色是80％透明黑色而不是深灰色，则会更加明显）。

@mixin grey($intensity: 0.5, $type: color) {
    #{$type}: rgba(black, $intensity);
}
.i-am-50-percent-gray {
    @include grey(0.5, color);
}

给出结果

.i-am-50-percent-gray {
  color: rgba(0, 0, 0, 0.5);
}

在SASS中命名颜色变量

4 个答案: