ホームページ > ウェブフロントエンド > CSSチュートリアル > SASS Mixin 値を動的 CSS プロパティにすることはできますか?

SASS Mixin 値を動的 CSS プロパティにすることはできますか?

Barbara Streisand
リリース: 2024-10-27 10:52:30
オリジナル
1000 人が閲覧しました

Can SASS Mixin Values Be Dynamic CSS Properties?

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート