68

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

$gutter: 10;

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

.grid+$gutter {
    background: red;
}

したがって、出力はCSSになります。

.grid10 {
    background: red;
}

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

4

4 に答える 4

103 
$gutter: 10;

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

たとえばURLなどの文字列で使用する場合：

background: url('/ui/all/fonts/#{$filename}.woff')
于 2012-10-08T01:47:28.607 に答える
40

「補間」に関するSassリファレンスから：

＃{}補間構文を使用して、セレクターとプロパティ名で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; }

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

于 2012-10-08T15:53:45.150 に答える
3

これが解決策です

$gutter: 10;

@each $i in $gutter {
  .g#{$i}{
     background: red;
  }
}
于 2012-10-05T10:05:38.017 に答える
0

ベンダープレフィックスの場合、私の場合、ミックスインはコンパイルされませんでした。だから私はこの例を使用しました

@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()
于 2018-08-13T08:29:43.573 に答える