1

背景/目標

私はいくつかのdiv。これらの各divに、2つの異なるクラスを配置したいと思います（それぞれがアプリ内で異なる論理的意味を持っています）。

1つのクラスでレベルを表したいのですが、これはdivの色に変換されます。別のクラスで距離を表し、適用される背景のフェードレベルを制御したいと思います。

だから私はdivを次のようにしたいと思います：

<div class="element level-beginner distance-long">

そして、それを、たとえば、色あせた緑色の背景に変換したいと思います。

私はLESSについて少し知っていますが（少しだけですが）、これはネストされたスタイルが役立つ場合のようには見えません（子要素を処理しないためではなく、特定のクラスがすでに適用されているかどうか） ）。

基本的に、互いに独立したCSSクラスとして、色と不透明度/フェードを制御したいと思います。

質問

  • クラスが色も指定せずにdiv要素の背景のアルファ/フェードを制御するように、より少ない使用率を使用する方法はありますか？
4

2 に答える 2

3

LESSの色の不透明度関数（フェードイン、フェードアウト、フェード）では、最初の引数として色が必要です。LESSは、クラスをどのように組み合わせるかわからないため、色をどこから取得するかがわかりません。

CSSにはopacityプロパティがありますが、要素全体（テキストを含む）の透明度を調整します。

唯一の実際のオプションは、使用する予定の組み合わせごとにセレクターを書き出すか、それらを生成するミックスインを用意することです。

.themeMatrix(@color) {
    &.styleA {
        background: fade(@color, 50%);
    }

    &.styleB {
        background: fade(@color, 20%);
    }

    &.styleC {
        border: 1px solid @color;
    }
}

.colorA {
    .themeMatrix(white);
}

.colorB {
    .themeMatrix(green);
}
于 2012-12-22T22:28:09.210 に答える
3

HTML、CSS、およびLESSだけでは、要素に適用された1つのクラスが、別のクラスの背景色をフェードアウトするために「知る」方法はありません。それは不可能です。

ただし、クラスをチェーンして新しい効果を作成できる同様の効果を得ることができます。

これを書くための基本的でわかりやすいCSSの方法は、次のようになります。

.fire {
  background: rgb(255,0,0)
}
.fire.level-beginner {
  background: rgba(255,0,0,.5)
}
.fire.level-pro {
  background: rgba(255,0,0,.25)
}

このCSSでは、要素にクラス.fire と .level-beginnerが含まれている場合、背景がフェードアウトします。

さて、これがプリプロセッサがクールな理由です。ネストされたクラスの作成をミックスインに任せることができるので、ネストされたすべてのサブオプションで新しい色（たとえば.waterwith blue）を追加するのは1行の問題です。

以下：

.colorfade(@fade) {
  background: fadeout(@color, @fade);
}

.colorfind (@color) {
  background: @color;
  &.level-beginner {
    .colorfade(50%)
  }
  &.level-pro {
    .colorfade(25%)
  }
}

.fire {
  .colorfind(red);
}

.water {
  .colorfind(blue);
}

.earth {
  .colorfind(green);
}

HTML：

<div class="fire level-beginner"></div>
<div class="water level-pro"></div>
<div class="earth level-beginner"></div>

デモ

于 2012-12-22T22:31:48.533 に答える