文字列補間を使用してSASSのミックスイン値としてCSSプロパティを設定するにはどうすればよいですか?

SASS ミックスイン値を CSS プロパティに設定する

ユニバーサル マージン/パディング ミックスインを作成する場合、CSS プロパティをミックスイン値として設定する必要がある場合があります。これを実現するには、文字列補間が使用されます。

CSS プロパティの文字列補間

CSS プロパティ名として変数を使用するには、文字列補間 (#{$var}) が必要です。

例

次のミックスインは、文字列補間を使用して CSS プロパティを設定する方法を示しています。

<code class="scss">[class*="shift"] {
  $sft-o: 10px;
  @mixin shift_stp($val) {
    &[class*="_sml"]{ #{$val}: $sft-o; }
    &[class*="_mid"]{ #{$val}: $sft-o * 2; }
    &[class*="_big"]{ #{$val}: $sft-o * 3; }
  }
  &[class*="_m"]{
    @include shift_stp(margin);
  }
  &[class*="_p"]{
    @include shift_stp(padding);
  }
}</code>

注

属性セレクター (*="_m") を使用する場合、名前に「_mid」を含む他のクラスとの潜在的な競合を考慮することが重要です。

以上が文字列補間を使用してSASSのミックスイン値としてCSSプロパティを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。