SASS Mixin 値は CSS プロパティにすることができますか?
問題:
ユニバーサル マージンの作成/padding mixin、コード構造が間違っているため失敗しました:
[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 プロパティ名として変数を使用するには、文字列補間が必要です。#{$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); } }
注: 属性セレクター構造を再評価して、セレクターの特異性を確保します。
以上がSASS Mixin 値を動的 CSS プロパティにすることはできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。