4

最近、 LESS CSSを使い始めました。これは素晴らしいです (まだ試していない場合は、チェックすることをお勧めします)。

私は次のことをしたいプロジェクトに取り組んでいます(これは適切な構文ではなく、私の問題を説明しようとするだけです):

if(lightness(@background_color) <= 50%)
{
    @secondary_color = #fff;
}
else
{
    @secondary_color = #000;
}

@background_colorこれにミックスインを使用できることはわかっていますが、上記の方法を使用すると、変数に基づいて色を変更する必要があるたびにミックスインを作成する必要がなくなります (@secondary_color境界線、背景色などに使用するため)。

私は解決策を見つけようとしてきましたが、運がありませんでした。この作業を行うために私に何ができるかについて誰かアイデアがある場合は、ぜひ聞いてみたい.

ありがとう！

4

1 に答える 1

5

更新あなたのコメントを読み直して、問題をよりよく理解しました。これはうまくいくはずです：

.secColor (@bgc, @prop) when (lightness(@bgc) >= 50%) and (@prop = color){
  color: black;
}
.secColor (@bgc, @prop) when (lightness(@bgc) >= 50%) and (@prop = background){
  background-color: black;
}
.secColor (@bgc, @prop) when (lightness(@bgc) >= 50%) and (@prop = border){
  border-color: black;
}
.secColor (@bgc, @prop) when (lightness(@bgc) >= 50%) and (@prop = all){
  color: black;
  background-color: black;      
  border-color: black;
}
.secColor (@bgc, @prop) when (lightness(@bgc) < 50%) and (@prop = color){
  color: white
}
.secColor (@bgc, @prop) when (lightness(@bgc) < 50%) and (@prop = background){
  background-color: white;
}
.secColor (@bgc, @prop) when (lightness(@bgc) < 50%) and (@prop = border){
  border-color: white;
}
.secColor (@bgc, @prop) when (lightness(@bgc) < 50%) and (@prop = all){
  color: white;
  background-color: white;      
  border-color: white;
}

次に、ミックスインを使用します。

.class1 {
  .secColor (#fff, color) //should only set the color property for class1
}

.class2 {
  .secColor (#000, all) //should set all three properties for class2
}

よりコンパクトなバージョンを追加

.propSwitch (@prop, @clr) when (@prop = color) {
  color: @clr;
}
.propSwitch (@prop, @clr) when (@prop = background) {
  background-color: @clr;
}
.propSwitch (@prop, @clr) when (@prop = border) {
  border-color: @clr;
}
.propSwitch (@prop, @clr) when (@prop = all) {
  color: @clr;
  background-color: @clr;      
  border-color: @clr;
}
.secColor (@bgc, @prop) when (lightness(@bgc) >= 50%) {
  .propSwitch (@prop, #000);
}
.secColor (@bgc, @prop) when (lightness(@bgc) < 50%) {
  .propSwitch (@prop, #fff);
}
于 2012-02-29T00:03:18.487 に答える