CSS 中的选择器可以使用 Sass 变量？

Question

有一个正确和错误的方式来做到这一点...

在Sass中最常见的用法就是给变量指一个值，便于项目的实施和样式的更新。比如很多地方用到颜色color:#f00，可以使用变量color:$c-red替代，而且在有红色的阴影地方使用也更方便。

关键是Sass的变量可以很容易的帮助我们改变颜色。可以用字符串值赋值给变量。不管是box-shadow的值，使用控制命令控制列表的多个值，或者是一个字符串文本。

对于这篇文章，我在想是否可以给变量存储字符串，然后在选择器上使用这些变量的一个想法。这样是一个很好的示例，但也是一个很低级的用例。

让我先说好的一面

Sass变量用于存储文本字符串做为CSS选择器，这里有两个很好的用例。

先来看第一个示例，假设你有一个现成的CSS框架，或者是更好的，在你的项目中你引入了第三方代码。你可能知道你有一系列重叠的类名，可能导致你整理这些代码以及他们之间的权重会让你忙到深夜。

一个非常有用的方法，就是在你的样式表中给重叠的类名加上你自己的前缀，如：

.mycss--btn {}
.mycss--input {}
.mycss--header {}

使用mycss--（你可以定义一个更好的名字）前缀，可以非常容易帮助你所你的类名与第三方代码重叠的类名区分出来。

要是这样设置，要无缝处理名称的更新，我们只需要使用一个变量来存储这个选择器前缀：

$my-name: mycss--;

.#{$my-name}btn {}
.#{$my-name}input {}
.#{$my-name}header {}

2014年3月8日更新

随着Sass3.3发布，我们现在可以创建一个局部父选择（这个例子中就是前缀mycss），并且使用&将其他部分与根选择器嵌套连在一起。

那么上面的示例，我们可以修改成：

.#{$my-name} {
  &btn {}
  &input {}
  &header {}
}

他们编译出来的代码是一样的，但让我们少写了很多代码。

你可以阅读Stuart Robson写的一篇文章《Even Easier BEMing with Sass 3.3》，可以了解更多有关于这种选择器写法。

无论是原来的写法还是新方法，对你来说都是有用的。只不过新方法更强大，如果你在一个单一的文件中所有规则使用这个前缀，可以采用新方法。

如果你想在一个示例中一次性使用一个前缀，或者你觉得这个没有意义，要重新组织你的类名；如果你想在多个文件中都使用同一个前缀，使用原来的方法仍然是有用的。

最后，很可能两种方法结合在一起使用才是理想的解决方案。

第二个示例中使用Sass的列表和指令正确选择变量的局部。

对于这个例子，我想为标题和带类名（某一个类）的HTML元素设置字体。我的意思是就是给HTML元素中的标题，以及创建一个类名，使标题和非标题元素具有相同的样式。

$prefix: txt;

$font-list: (
  h1   $prefix    3em     100,
  h2   $prefix    2.5em   100,
  h3   $prefix    2em     300,
  h4   $prefix    1.75em  300,
  h5   $prefix    1.5em   400,
  h6   $prefix    1.25em  400
);

@each $value in $font-list {

  #{nth($value, 1)},
  .#{nth($value, 2)}-#{nth($value, 1)} {
      font-size: nth($value, 3);
      font-weight: nth($value, 4);
    }
}

编译出来的CSS:

h1,
.txt-h1 {
  font-size: 3em;
  font-weight: 100;
}

h2,
.txt-h2 {
  font-size: 2.5em;
  font-weight: 100;
}

h3,
.txt-h3 {
  font-size: 2em;
  font-weight: 300;
}

h4,
.txt-h4 {
  font-size: 1.75em;
  font-weight: 300;
}

h5,
.txt-h5 {
  font-size: 1.5em;
  font-weight: 400;
}

h6,
.txt-h6 {
  font-size: 1.25em;
  font-weight: 400;
}

在这里，我创建了一个变量来存储前缀txt。如果哪一天我可能要更改标题，或者我还没有想到要改成什么，那么我修改一个前缀总比修改六个要来得快。该示例其他部分展示了Sass列表和指令的功能。如果你不了解，可以看看指令相关的文章。

因此这两个示例向你展示了选择器中使用变量好的一面。

你不应该做的...

$a-base: 'a, a:visited';
$a-hovers: 'a:hover, a:active';

#{$a-base} {
  color: $c-link;
  font-size: 1em;
  text-decoration: none;
}

#{$a-hovers} {
  color: $c-link-hover;
  text-decoratoin: underline;
}

这里的想法是，将选择器的字符串存储在一个变量中。这样看起来你写了较少的代码，还能排序。

我想探讨下，在一些特殊的例子中会存在较大的问题。

首先，除非你知道扩展选择器在Sass中哪个位置，这样也并不能帮你减少代码的编写，因为他仅仅是移动了代码。我们不应该设置的变量与他们的属性有关联。

现在，如果你想用重用这些选择器，并且嵌套在其他一些元素上，那你这样做或许可以派上一点用场：

#{$a-base} {}
#{$a-hovers} {}
.sidebar {
  #{$a-base} {}
  #{$a-hovers} {}
}

如果能够重复使用这里设置好的变量，是可以帮助我们减少编写的代码。然而，如果你需要改变其中某个选择器时，这样的设置并没有真正的帮到我们。

因为他们只是Sass变量中的某一部分。如果我需要修改.sidebar中的a:hover状态，但我又要维持.sidebar中的a:active状态不变，那我就需要像下面这样处理：

.sidebar {
  #{$a-base} {}
  #{$a-hovers} {}
  a:hover {
    (alternate styling)
  }
}

或者

.sidebar {
  #{$a-base} {}
  a:hover {
    (alternate styling)
  }
  a:active {
    (alternate styling)
  }
}

在第一个示例中存在两个问题：

1. 我要两次声明a:hover样式，这不是理想中的效果
2. 实际上重写的“a:hover”样式会覆盖“a:active”样式，这样是不正确的

在第二个示例中，我不得不放弃变量选择器的样式，重新手写样式。这并没有错，因为我不得不这样做。但是问题就出来了，在这里不能重复使用变量，那么变量在此就没什么用处。

总结

给变量存储一个字符串文本或一个值是非常有用的。然而给选择器使用变量想法，起初是一个好的想法，但事实上我已举例说明了他们会存在一些严重的问题。

无论如何，你觉得我的例子有没有用，但实际中，Sass 中的变量是一个很强的功能，可以好好的利用起来。只要确认你使用变量是明智的，而且是对你工作有帮助的。