将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%;
  }
}

地图中的选择器

也许您的抽象适合键/值对的情况。 那是萨斯的地图。

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

您可以单独使用它们，例如：

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

或遍历它们：

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

例子

见笔选择器的萨斯变量克里斯Coyier（ @chriscoyier上） CodePen 。

翻译自: https://css-tricks.com/snippets/sass/use-sass-variable-selector/