0

SASSを使用してクラスベースのテーマを作成する方法を考え出そうとしていますが、初めてなので、それを機能させるのに十分な知識がなく、自分の試みがそれだけの価値があるかどうかもわかりません.

HTML または Body タグのいずれかに設定されたクラスに基づいてテーマを作成したいと考えています。次に、すべての色や背景などがそこから派生します。

SASSにやってもらいたいのは、すべての脚の仕事を処理することです. 私はこれが初めてだと言うので、粗い例を許してください：

$baseBackground: #0f0;

.blue { 
    $baseBackground: #0f0;
}
.red {
    $baseBackground: #0f0;
}
.header {
    background: $baseBackground;
}

上記のコード ブロックが SASS の場合、CSS は次のようになります。

.header {
    background: #0f0;
}
.blue .header { 
    background: #00f;
}
.red .header{
    background: #f00;
}

これが可能かどうかはわかりません。明らかに、上記の例は機能しません。追加のスタイルを生成せずにこれを処理する方法はありますか?

お時間をいただきありがとうございました。

クリス

4

1 に答える 1

2

最善の解決策は、おそらくSASS mixinsを使用するものだと思います。さまざまな色を mixin の引数として使用して、テーマの mixin 定義を設定できます。その後、さまざまなテーマに対して異なる引数値を使用してミックスインを呼び出すことができます。これは、複数の引数の使用を示し、「ヘッダー」セクションと「フッター」セクションの両方を持つ、あなたのものから少し拡張された例です。

@mixin theme($background-color, $text-color) {
    .header {
        background: $background-color;
    }

    .footer {
        background: $background-color;
        color: $text-color;
    }
}

@include theme(#0f0, white);

.blue {
    @include theme(#00f, lightgray);
}

.red {
    @include theme(#f00, gray);
}

この例からコンパイルされた CSS は次のようになります。

.header {
    background: lime;
}
.footer {
    background: lime;
    color: white;
}

.blue .header {
    background: blue;
}
.blue .footer {
    background: blue;
    color: lightgrey;
}

.red .header {
    background: red;
}
.red .footer {
    background: red;
    color: gray;
}
于 2013-03-20T13:30:35.333 に答える