6

When creating a color scheme in SASS what's the conventional variable names for defining colors?

I know using color names are bad. Such as:

$blue
$red
$green

But I've not seen an alternative. I'm struggling for variable names for colors on the site that convey meaning.

Any ideas?

4

4 回答 4

13

我在“SASS & Color Variables”文章中发现了另一个想法。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，不知道哪种方法更实用，但我喜欢它将颜色与其功能分开的方式。

于 2013-07-23T12:53:11.730 回答
5

以我个人的经验，命名颜色最有用的方法是根据颜色的功能来命名，例如

  • $背景
  • $对比度
  • $文本
  • $aside
  • $链接

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

那么你可能在不同的风格上定义了不同且可交换的配色方案，例如：

  • _dark_scheme.scss
  • _light_scheme.scss
  • _pastels.scss

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

于 2013-05-28T17:22:10.513 回答
2

我喜欢将通用命名与特定命名（有利于代码完成）和描述/功能命名相结合的想法。所以你有这样的事情：

 // 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;
于 2013-09-26T15:32:33.563 回答
0

您甚至可以为灰色创建一个 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);
}
于 2014-02-25T16:43:54.187 回答