停止使用很多的 Sass 变量

Question

使用 Sass，像这样来写代码：

color: $body-text-color;
padding: $sidebar-padding;

但我并不喜欢这样这样，我现在喜欢用 Sass 按下面的方式来写：

color: $hot-pink;
padding: 20px;

第一个是抽像的实例，远离了实用价值，我们应该使用一种更通用的，语义命名变量。

这种方法和很多人喜欢，特别当它涉及到颜色的应用。Sacha Greif 的文章就是一个简单的 Sass 实例。

$blue: #00f;
$red: #f00;

$text-color: $blue;
$link-color: $red;

.foo{
  color: $text-color;
}
a{
  color: $link-color;
}  

类似的事情做得多了，我从中发现它不易于进行长期的维护，实际上也减慢了开发速度。

取决于你说的 语义化

为一个变量定义一个具语义化名，就必须得传达出有意义的东西。我作为一名开发人员，这是具有语义化：

.sidebar{
  color: $sidebar-text-color;
}  

$sidebar-text-color 不添加任何值或者说不能从选择器或属性值中推断出他的意思。他仅是一个不断重复使用的信息。

得到任何有意义的信息，我需要将链接到其他地方的一个两个值，如：

// _color_palette.scss
$hot-pink: #bc436c;

// _config_variables.scss
$sidebar-text-color: $hot-pink;

//_sidebar.scss
color: $sidebar-text-color;

这可能听起来并不算多，但它在整个项目和你在更多开发中使用到。

另一个方面，将示例修改成：

.sidebar{
  color: $hot-pink;
}

立即有更多的有用信息。$hot-pink 抽像化对颜色代码块并没有太多意义，但对开发来说，加入了更多的含义。

另外，如果想看到这个值的实际作用，仅在一个地方定义了这样的一个值：

// _color_palette.scss
$hot-pink: #bc436c;

//_sidebar.scss
color: $hot-pink;

但那不是维护的噩梦吗？

评论中有这样的一种观点：

如果我想把我的文本从 pink 变成 green，我不能把 $hot-pink 从 pink 变成 green。这样没有道理呀！

同意。因此，只是添加一个抽像层，并没有做任何事情来解决这个问题，只需添加新的色彩变量和在更新所需要替代的值：

// _color_palette.scss
$hot-pink: #bc436c;
$forest-green: #0c5c19;

// _sidebar.scss
color: $forest-green;

好吗？好。

但是，如果我需要在多个地方更新颜色什么的时候呢？

在多个地方更新，这真的不是件难事。

当我想在全局样式中改变一个值，不管它用在哪里，我想不出一个只用一次的方法。

我花了大部分时间用在一个 单一的模块上。模块是独立的，所以我不能想到一个例子，我想说“无论在任何模块中出现，修改这个值”。

主题

如果你从一个单一的样式表或引用的不同样式变量的模块生成多个主题就是强大的吗？在这个例子中，$sidebar-text-color 是一个真正的变量，它不仅仅是一个使用不同名的常数，所以我们会这样做：

// _normal.scss
$sidebar-text-color: $hot-pink;

// _christmas.scss
$sidebar-text-color: $red;

// _halloween.scss
$sidebar-text-color: $orange;

// _sidebar.scss
color: $sidebar-text-color;

但是你多久真的需要这样做呢？它对我来说是很少见。

总结

在一年前 Nicolas Gallagher 就告诉我们内容派生出来的类名并不总是最有用的名字对于开发人员，但当我们被告之 .bold 和 .red 被Web开发中除去的理由时，我们依然还带有这么多的类名。

可重用的颜色转换为我们可读的变量，如$hot-pink是很优秀和值得推荐的。

然而使用一个content-或module-定义另外一人变量。

• 不易于长期维护。如查我需要在一个模块中改变一个颜色，在模块中易于定义一个可易读懂的值。
• 降低开发。每次我要添加一个 color 或 background 找到或创建一个全局变量是比较痛苦。

如果你接受这个颜色想法，你可以最终会写成这样：

.sidebar{
  background: $sidebar-background-color;
  color: $sidebar-text-color;
  padding: $sidebar-padding-value;
  text-align: $sidebar-alignment;
}

看起来没什么乐趣可言，我宁愿大家像下面这样维护：

.sidebar{
  background: $grey;
  color: $hot-pink;
  padding: rhythm(1);
  text-align: center;
}