我可以为选择器使用变量吗？答案

【问题标题】：Can I use variables for selectors?我可以为选择器使用变量吗？
【发布时间】：2012-09-26 11:12:57
【问题描述】：

我有这个变量：

$gutter: 10;

我想在像 SCSS 这样的选择器中使用它：

.grid+$gutter {
    background: red;
}

所以输出变成了 CSS：

.grid10 {
    background: red;
}

但这不起作用。有可能吗？

【问题讨论】：

标签： css variables sass css-selectors

【解决方案1】：

如果它是供应商前缀，在我的情况下，mixin 没有编译。所以我用了这个例子

@mixin range-thumb()
  -webkit-appearance: none;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  margin-top: -14px; 
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;

input[type=range]
  &::-webkit-slider-thumb
    @include range-thumb()
  &::-moz-range-thumb
    @include range-thumb()
  &::-ms-thumb
    @include range-thumb()

【讨论】：

【解决方案2】：

$gutter: 10;

.grid#{$gutter} {
    background: red;
}

如果在字符串中使用，例如在 url 中：

background: url('/ui/all/fonts/#{$filename}.woff')

【讨论】：

我有一个类似的问题，也涉及在 CSS 选择器中使用变量。我的问题很长，所以我创建了一个 pastebin：pastebin.com/FkdNSaG7

【解决方案3】：

来自Sass Reference on "Interpolation"：

您还可以使用 #{} 插值语法在选择器和属性名称中使用 SassScript 变量：

$gutter: 10;

.grid#{$gutter} {
    background: red;
}

此外，使插值工作不需要@each 指令，并且由于您的$gutter 只包含一个值，因此不需要循环。

如果您有多个值要为其创建规则，则可以使用 Sass list 和 @each：

$grid: 10, 40, 120, 240;

@each $i in $grid {
  .g#{$i}{
    width: #{$i}px;
  }
}

...生成以下输出：

.g10  { width: 10px; }
.g40  { width: 40px; }
.g120 { width: 120px; }
.g240 { width: 240px; }

Here are some more examples..

【讨论】：

【解决方案4】：

解决办法

$gutter: 10;

@each $i in $gutter {
  .g#{$i}{
     background: red;
  }
}

【讨论】：

这只输出.g10