0

私は個人的な使用のためにある種の CSS フレームワークを書いていて、問題に遭遇しました。あなたが経験豊富な CSS ライターであれば、LESS.CSS に精通していると確信しています。そう...

次のように、独自のカラー パレットを LESS 変数に格納しています。

    @color-red: #...;
    @color-green: #...;
    @color-blue: #...;

そして、各色を特定のクラスに割り当てます。

    .bg-red { background: @color-red; }
    .bg-green { background: @color-green; }
    .bg-blue { background: @color-blue; }

次に、次のクラスがありblockます。

    .block {
         display: block;
         float: left;
         padding: 10px;
         margin: 10px;
    }

その目的は.block:hover、現在の要素の背景を変更し、blockそれをインクリメントすることです-たとえば-＃222. 通常、これは次のようになります。

    .block:hover {
         background: @background + #222;
    }

私の唯一の問題は、パーツがカラー パレットの任意のものである可能性がある場所で@backgrounddiv を作成するため、ここにあるものがわからないことです。<div class="block bg-blue">bg-...

したがって、現在の背景をターゲットにするには、ある種の相対的な命名が必要になると思います。これを解決するのを手伝ってくれませんか？

PS: 私が正しく説明していないと思われる場合は、これが PHP であり、CSS/LESS でこれを行っていたと想像してみてください。

    $background += 222;
4

2 に答える 2

0

私の研究と、職場で毎日LESSを使用していることから。LESS を使用するだけで処理された要素の色を取得する方法があるとは思いません。これを行うには、Jquery または何らかのスクリプトを使用する必要があると思います。

これは、色を操作するための多くのツールを備えたプラグインです。jQuery カラープラグイン xcolor

見つかった RGB 要素の色を 16 進数に変換して、別の色を追加できるようにする別の関数が必要になる場合もあります。JqueryはRGBをHEXカラー値に変換します

これがお役に立てば幸いです。

于 2012-11-16T15:46:26.573 に答える
0

LESS がコンパイルされると、実際の色を「読み取る」ことはできません。.blockただし、ホバーの代わりに色クラスを使用できます。これは、色を制御しているためです。LESS はこれを簡単にします:

@color-red: #c00;
@color-green: #0c0;
@color-blue: #00c;

.makeHover(@color) {
   background: @color + #222;
}

.bg-red { 
    background: @color-red; 
    &:hover {.makeHover(@color-red)}
 }
.bg-green { 
    background: @color-green; 
    &:hover {.makeHover(@color-green)}
 }
.bg-blue { 
    background: @color-blue; 
    &:hover {.makeHover(@color-blue)}
 }

これにより、次の css が生成されます。

.bg-red {
  background: #cc0000;
}
.bg-red:hover {
  background: #ee2222;
}
.bg-green {
  background: #00cc00;
}
.bg-green:hover {
  background: #22ee22;
}
.bg-blue {
  background: #0000cc;
}
.bg-blue:hover {
  background: #2222ee;
}

暗くするために組み込みのカラー関数を使用することもできます。

実際にもっと一般的な css が必要な場合は、この fiddle が示すような疑似クラスで何かを行います。CSS3 ブラウザーのみがターゲットになっている場合は:before、そのフィドルの要素を削除して、要素の色形式を使用できrgba()ます。background.block

于 2012-11-17T19:31:53.467 に答える