使用 Sass 变量作为选择器

假设你需要在代码的多个地方使用某个特定的选择器。当然，这种情况并不十分常见，但确实会发生。重复的代码通常是进行抽象的机会。在 Sass 中抽象值很容易，但选择器则稍微棘手一些。

一种方法是将你的选择器创建为变量。以下是一个逗号分隔的选择器列表示例

$selectors: "
  .module,
  body.alternate .module
";

然后要使用它，你必须插入变量，如下所示

#{$selectors} {
  background: red;
}

这也可以与嵌套一起使用

.nested {
  #{$selectors} {
    background: red;
  }
}

前缀

变量也可以只是选择器的一部分，比如前缀。

$prefix: css-tricks-;

.#{$prefix}button {
  padding: 0.5rem;
}

你也可以使用嵌套来进行前缀

.#{$prefix} {
  &module {
    padding: 1rem;
  } 
  &header {
    font-size: 110%;
  }
  &footer {
    font-size: 90%;
  }
}

映射中的选择器

也许你的抽象适合键值对的情况。那是 Sass 中的映射。

$selectorMap: (
  selectorsFoo: ".module",
  selectorsBar: ".moodule-2"
);

你可以像这样单独使用它们

#{map-get($selectorMap, selectorsFoo)} {
  padding: 1rem;
}

或者循环遍历它们

@each $selectorName, $actualSelector in $selectorMap {
  #{$actualSelector} {
    padding: 1rem;
  }
}

示例

查看 Chris Coyier 在 CodePen 上创作的笔 Sass 变量作为选择器（@chriscoyier）。