1

私はこのコードスニペットを持っています:

// Color settings 
.setCat(@x) {
    .cat@{x} {
        .menu-link {
            &.selected, &:hover { background: ~@{"catColor@{x}"}; }
            &:hover:after { border-top-color: ~@{"catColor@{x}"}; }
            &:only-child:after { border-top-color: transparent; }
        }
        .menu-link-submenu { background: ~@{"catColor@{x}"}; }
    }
}

.setCat(1);

私がやろうとしていることを見ていただければ幸いです。LESS がその変数に格納されている 16 進数の色にコンパイルする @catColor1 出力が必要です。

これは可能ですか？より良い方法はありますか？

4

1 に答える 1

3

両方の呼び出しを文字列にネストする必要があります。私はすべての処理を単一の新しい変数を通過させましたuseColor（これを行う必要はありません。単にきれいに見えると思います）：

.setCat(@x) {
    .cat@{x} {
        @useColor: ~"@{catColor@{x}}";
        .menu-link {
            &.selected, &:hover { background: @useColor; }
            &:hover:after { border-top-color: @useColor; }
            &:only-child:after { border-top-color: transparent; }
        }
        .menu-link-submenu { background: @useColor; }
    }
}

したがって、次の LESS を仮定します。

@catColor1: #fff;
@catColor2: #aaa;

.setCat(1);
.setCat(2);

次の CSS を生成します。

.cat1 .menu-link.selected,
.cat1 .menu-link:hover {
  background: #ffffff;
}
.cat1 .menu-link:hover:after {
  border-top-color: #ffffff;
}
.cat1 .menu-link:only-child:after {
  border-top-color: transparent;
}
.cat1 .menu-link-submenu {
  background: #ffffff;
}
.cat2 .menu-link.selected,
.cat2 .menu-link:hover {
  background: #aaaaaa;
}
.cat2 .menu-link:hover:after {
  border-top-color: #aaaaaa;
}
.cat2 .menu-link:only-child:after {
  border-top-color: transparent;
}
.cat2 .menu-link-submenu {
  background: #aaaaaa;
}
于 2013-05-30T13:52:21.697 に答える