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

SASS Mixin 値としての CSS プロパティ

SASS でユニバーサル マージン/パディング ミックスインを作成する場合、CSS プロパティを次のように設定することについて懸念が生じる可能性があります。ミックスインの値。提供されているコード スニペットは、このタスクを達成するための試みです。ただし、完全に機能させるには、特定の変更が必要です。

解決策:

この問題を解決する鍵は、文字列補間にあります。 #{$var} 表記を利用すると、変数をプロパティ名として使用できます。

修正コード:

[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" の場合、このセレクターは、クラス名に "_m" を含むすべての要素 ("_mid" を持つ要素も含む) に適用されることを考慮する価値があります。したがって、望ましい特異性を達成するには、ある程度の再評価と調整が必要になる場合があります。

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