web-dev-qa-db-ja.com

セレクターに変数を使用できますか？

私はこの変数を持っています：

$Gutter: 10;

SCSSのようなセレクターで使用したい：

.grid+$Gutter {
    background: red;
}

そのため、出力はCSSになります。

.grid10 {
    background: red;
}

しかし、これは機能しません。出来ますか？

cssvariablessasscss-selectors
62
Johansrk
$Gutter: 10;

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

URLなどの文字列で使用する場合：

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

「補間」のass参照 から：

＃{}補間構文を使用して、セレクターおよびプロパティ名でSassScript変数を使用することもできます。

$Gutter: 10;

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

さらに、 @each 補間が機能するために、および$Gutterには1つの値のみが含まれ、ループは必要ありません。

ルールを作成する複数の値がある場合は、 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; }

ここにいくつかの例があります。 。

38
fk_

ここに解決策があります

$Gutter: 10;

@each $i in $Gutter {
  .g#{$i}{
     background: red;
  }
}
2
Johansrk

ベンダープレフィックスの場合、私の場合、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()
0
Artemee Senin