使用 Sass 定义变量来保存你的颜色值

Question

我们在使用 Sass 的一个重要的原因就是他可以定义变量，运用到你的样式文件中，使你的样式文件更加利于维护和更改。比如说对于页面文字的颜色，可能很多地方都在用相同的颜色值，但是如果按照传统的方式，每个地方都必须写一遍这样代码，这对于大型项目来说可不是什么好事。如果要更改整体颜色值，也必须要每一处都去手动修改，这会很麻烦！

在这篇文章中，我将向你展示一个快速，为你的颜色变量的简单方法。

问题

比如说你有以下的CSS：

h1 { background-color: #b0eb00; }
a { color: #b0eb00; }
button { border-color: #b0eb00; box-shadow: 0 0 1rem #b0eb00; }

如果你决定使用一个颜色 #b0eb00 在多个地方，后期你想要改这个颜色，你就必须每一次都去修改，但是如果使用 Sass 定义一个变量，我们就只需要更改这个变量即可。

$yellow-green: #b0eb00;

h1 { background-color: $yellow-green; }
a { color: $yellow-green;}
button { border-color: $yellow-green; box-shadow: 0 0 1rem $yellow-green;}

现在我们可以很轻松的更改网页里面文字的颜色，可能你还想到了其他的颜色，我们都可以使用变量的方式定义。

$yellow-green: #b0eb00;
$gray: #595959;
$dark-gray: #363636;
$light-gray: #a6a6a6;

随着时间的推移，我们定义的变量越来越多。

$yellow-green: #b0eb00;
$red: #b30015;
$blue: #2a00b3;
$other-blue: #0077b3;
$cyan: #00b0b3;
$transparent-cyan: #24fbff;
$periwinkle: #8a7dff;
$light-gray: #a6a6a6;
$gray: #595959;
$darkish-gray: #444;
$dark-gray: #363636;
$darker-gray: #303030;
$darkest-gray: #292929;
$darkester-gray: #111;

上面定义的变量越来越多，但看名字已经无法确定他是什么颜色了，这个时候我们得考虑更加合理的命名方式。

一个好的解决方案

你觉得你的颜色变量的痛苦和决定重构。而命名的变量后的颜色，现在你要说出他们的名字后，他们是如何使用的。

$background-color: #b0eb00;
$error-color: #b30015;
$anchor-color: #2a00b3;
$anchor-hover-color: #0077b3;
$anchor-visited-color: #00b0b3;
$anchor-visited-blending-color: #24fbff;
$tooltip-color: #8a7dff;
$emphasis-color: #a6a6a6;
$text-color: #595959;
$strong-color: #444;
$username-color: #363636;
$shadow-color: #303030;
$border-color: #292929;
$marquee-color: #111;

至少现在很明显的知道变量的用途，但是又会出现一个新的问题，当你想使用 #292929 作为某个 DIV 的背景，于是去找这个变量 $border-color 添加到你的 CSS 中，发现这个命名看起来很别扭，明明是边框的颜色，却设置给了背景颜色。

另一个解决方案

你放弃了命名的颜色的方式，决定使用数字代替：

$color1: #b0eb00;
$color2: #b30015;
$color3: #2a00b3;
$color4: #0077b3;
$color5: #00b0b3;
$color6: #24fbff;
$color7: #8a7dff;
$color8: #a6a6a6;
$color9: #595959;
$color10: #444;
$color11: #363636;
$color12: #303030;
$color13: #292929;
$color14: #111;

现在你的变量都是独特的，但他们很难记住。在边框的颜色到底是 $color12 或 $color13，如果你看到 $color4 在你的代码，你可以告诉它是什么颜色，当你想删除 $color8，你不确定那些地方用这个变量，您的项目或将因此混乱。

一种新的方法

它不会是好的如果你可以在颜色一样，你想做在开始你的变量的名称，但没有所有的命名困难？你可以使用名称颜色！使用这个工具，重命名颜色变量。

$lime: #b0eb00;
$bright-red: #b30015;
$dark-blue: #2a00b3;
$deep-cerulean: #0077b3;
$bondi-blue: #00b0b3;
$cyan: #24fbff;
$heliotrope: #8a7dff;
$silver-chalice: #a6a6a6;
$scorpion: #595959;
$tundora: #444;
$mine-shaft: #363636;
$cod-gray: #111;

现在你的变量命名的颜色，但他们的独特和令人难忘的。 我最喜欢的颜色特征的名称，它显示了你最接近的颜色的十六进制编码不匹配时的确切的颜色。这个工具有超过 1500 个颜色名称，所以很容易找到你的所有变量的名字。比如说 #303030  and  #292929 都会被命名为 $mine-shaft 。保持你的颜色变量太颗粒，如果颜色的名字是重复的，那么它是不值得拥有它自己的变量。相反，使用内置的 SASS 色彩功能。在上面的例子中，你可以使用 darken($mine-shaft, 2.5%) 而不是 #303030 。