CSS プロパティ値を SASS Mixin パラメータとして使用するにはどうすればよいですか?

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

ユニバーサル マージン/パディング ミックスインを作成しようとすると、設定に関する問題が発生しました。ミックスイン値としての CSS プロパティ。この記事は、SASS ミックスインでの文字列補間の使用を検討することで、この問題を解決することを目的としています。

CSS プロパティ値をミックスイン値として設定するには、文字列補間を利用する必要があります。この手法を使用すると、変数をミックスイン定義内にプロパティ名として埋め込むことができます。

文字列補間を組み込んだコードの更新バージョンは次のとおりです。

[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);
  }
}

ミックスイン定義を使用すると、CSS プロパティ名を動的に設定できます。

注:

• *="_m" のような属性セレクターは、次の要素を含む要素にも適用される場合があります。クラス名には「_mid」が含まれています。このため、命名戦略を再考する必要があるかもしれません。
• ミックスイン定義内で変数をプロパティ名として使用するには、文字列補間が重要です。

以上がCSS プロパティ値を SASS Mixin パラメータとして使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。