我可以为选择器使用变量吗?

Posted

技术标签:

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

我有这个变量:

$gutter: 10;

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

.grid+$gutter 
    background: red;

所以输出变成了 CSS:

.grid10 
    background: red;

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

【问题讨论】:

【参考方案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: #$ipx;
  

...生成以下输出:

.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

以上是关于我可以为选择器使用变量吗?的主要内容,如果未能解决你的问题,请参考以下文章

LESS:您可以将 CSS 选择器与媒体查询分组吗?

使用变量作为 jQuery 选择器

我应该将 jQuery 选择器组合到变量中以获得更好的性能吗? [复制]

jq 选择器eq后面能用变量吗

有人可以为 Delphi 推荐一个颜色选择器组件吗?

jQuery:DOM元素变量的链选择器