3

いくつかのクラスで変数を使用したいので、次のようにします。

$height: 100px

#foo
  height: $height

#bar
  height: $height

しかし、これはグローバル変数のスコープを汚染するので、サブスコープを使用したいと思います。

要素に共通のコンテナがある場合、それは簡単です:

#common-container
  $height: 100px

  #foo
    height: $height

  #bar
    height: $height

しかし、このアプローチは、グローバル変数のスコープを汚染する代わりに、結果の CSS を汚染します。連鎖したセレクターは絶対に不要です。場合によっては、要素に共通のコンテナーがないだけなので、このアプローチはまったく選択肢になりません。

ダミーの mixin を使用して、この問題を回避しようとしました。

=local-scope
  @content

それはうまくいくようです：

+local-scope
  $foo: foo

@warn $foo // -> Error: Undefined variable: "$font-size".

ただし、ミックスインを使用する前に変数を宣言すると、上書きされます。:(

$foo: foo

+local-scope
  $foo: bar

@warn $foo // -> bar

問題は、グローバル名前空間を台無しにしたり、不必要にセレクターをチェーンしたりせずに、変数のスコープを正しく制限するにはどうすればよいかということです。

4

3 に答える 3

5

これは inline を防ぎ@importsますが、密かに複雑な特異性を促進するため、とにかく暗いパターンだと思います。

@at-root {
  $this: that;  // not a global variable

  .your-original-css {
    // rules
  }
}
于 2016-02-05T21:43:56.323 に答える
2

@ifこの目的のためにステートメントを使用できます。

@if (true) {
    $foo: bar;
    @debug $foo;
}

@debug $foo; // undefined

if ステートメント内ではインポートできないことに注意してください。

于 2013-10-16T17:48:54.230 に答える
0

したがって、これは Sass では使用できません。

そのためのチケットが Sass の問題キューにあります: https://github.com/nex3/sass/issues/136

ただし、Sass 4.0 までは実装されません。

于 2014-01-17T08:08:23.027 に答える