CSS プロパティを SASS Mixin 値として使用する方法: 文字列補間ガイド

CSS プロパティを SASS Mixin 値として使用する

汎用性の高いマージン/パディング ミックスインを作成しようとして、SASS で問題が発生しました。あなたが説明した問題を詳しく調べて、一緒に解決策を見つけてみましょう。

ミックスインでの CSS プロパティの設定

コードは、SASS ミックスイン値内で CSS プロパティ (マージンとパディング) を設定しようとします。ただし、重要な問題があります。CSS プロパティをミックスイン値として直接使用することはできません。代わりに、「文字列補間」と呼ばれる手法を使用して変数をプロパティ名として含める必要があります。

文字列補間の使用

文字列補間を使用すると、#{$ を使用して変数値を文字列に挿入できます。変数} 構文。これは、ミックスイン内の変数に基づいて CSS プロパティを動的に設定するのに役立ちます。

文字列補間を利用するようにコードを変更する方法は次のとおりです:

<code class="sass">[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」を含む要素とも一致することに注意することが重要です。これは意図した動作ではない可能性があるため、それに応じて属性セレクターを修正することを検討してください。

以上がCSS プロパティを SASS Mixin 値として使用する方法: 文字列補間ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。