css - クラス名に対するSASSチェック

Question

こんにちは私はまだSASSに非常に慣れておらず、プログラミングの第一人者ではありません。

クラス名に基づいて異なる背景色を必要とする10個の傍白要素があります。

SASSのドキュメントを調べましたが、理解できません。

脇にxのクラス名がある場合は背景色を作成しますx脇にyのクラス名がある場合は背景色を作成しますyなど

これを行うための優れた効率的な方法はありますか？

みんなに感謝し、それが単純な質問なら申し訳ありません。

Answer 1

これは単にあなたがやりたいタイピングの量にかかっています。バックグラウンドミックスインを作成して、CSSルールの脇に含めることもできますが、それは本当に必要ですか？

でもそうなら……

@mixin bg($color) {
    background: $color;
}

aside#foo {
    @include bg(#fff);
}

Answer 2

「標準」の名前がない色を使用している場合（またはクラスの名前が色の名前にならない場合、たとえば、製品=青、アドレス=赤）、リストのリストあなたが望むものです：

$colors:
    ( black #000
    , white #FFF
    , red #F00
    , green #0F0
    , blue #00F
    );

@each $i in $colors {
    aside.#{nth($i, 1)} {
        background: nth($i, 2);
    }
}

出力：

aside.black {
  background: black; }

aside.white {
  background: white; }

aside.red {
  background: red; }

aside.green {
  background: lime; }

aside.blue {
  background: blue; }

標準のキーワードで色を使用している場合、これは機能する可能性があります。

$colors2: black, white, red, green, blue;

@each $i in $colors2 {
    aside.#{$i} { background: $i; }
}

出力（これはでのみ機能するようですが--style debug、使用すると--style compressエラーが発生します。奇妙な）：

aside.black {
  background: black; }

aside.white {
  background: white; }

aside.red {
  background: red; }

aside.green {
  background: green; }

aside.blue {
  background: blue; }

Answer 3

「asideのクラス名がxの場合は背景色をxにします。asideのクラス名がyの場合は背景色をyにします」は次のCSSに変換されます。

aside.x {background-color: x}
aside.y {background-color: y}

SASSを使いたい理由はありますか？CSSを更新せずに将来必要なクラスを追加できるように、動的にするためですか？（その場合、SASSコードはCSSにコンパイルされ、その後変更されないため、SASSでは不可能です）。

その機能を実現するには、JS（jQuery）を使用する必要があります。

$('aside').each(function () {
    $(this).css('background-color', $(this).attr('class'));
});

編集：SASSでループを使用して、多数のクラスと対応する背景色を生成することもできます。