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

css CSS

梅L

2020-03-18

我有这个变量：

$gutter: 10;

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

.grid+$gutter {
    background: red;
}

因此输出变为CSS：

.grid10 {
    background: red;
}

但这是行不通的。可能吗？

第2146篇《我可以使用变量作为选择器吗？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
Eva伽罗 2020.03.18

如果是供应商前缀，那么在我的情况下，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()
EvaJinJin 2020.03.18

从Sass参考“插值”开始：

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

$gutter: 10;

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

此外，该@each指令不需要进行插值工作，并且由于您$gutter仅包含一个值，因此无需循环。

如果您有多个值可为其创建规则，则可以使用Sass列表和@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; }

这里还有更多示例。。

梅L 2020.03.18

这是解决方案

$gutter: 10;

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android