4

クライアントが最小数の変数でサイトの配色を更新できるように、LESSCSSで「テーマエンジン」を開発しようとしています。現在、デフォルトセットを割り当てている変数ファイルがあり、ユーザー入力の数を短縮するために、明るくする機能と暗くする機能を頻繁に利用しています。

// snippet 1
@grayLight: #999999;
@grayLighter: darken(@grayLight, 10%);

明るく/暗くする機能を変数として割り当てる方法はありますか？このように、トーンのコントラスト（暗い/明るいまたは明るい/暗い）を指定するだけで済みます。

// snippet 2 (does not work)
@contrastVerb: darken;
@linkColorHover: @contrastVerb(@linkColor, 10%);//#FFA500;

Javascriptブラケット表記を使用して、関数リクエストを呼び出してみました。

// snippet 3 (does not work)
@linkColorHover: `window[@contrastVerb]`(@linkColor, 10%);//#FFA500;

オプションはパターンマッチングです：

// snippet 4
@tone: light;
.linkColor(light, @color){
    color: lighten(@color, 10%);
}
.linkColor(dark, @color){
    color: darken(@color, 10%);
}

.linkColor(@tone, #f17900);

ただし、スニペット4は、スニペット2または3よりもはるかに冗長であり、多くの余分なコードが生成されます。

前もって感謝します！

4

2 に答える 2

0

にクラスを追加し、<body>cssルール（ミックスインを使用）を作成して、サイト内のすべてを変更してみてください。

<body class="section1"></body>

少ないデモ：

.color-mixin (@color) {
    color: @color;
    .foo{
         background-color: darken(@color, 10%);
    }
    a {
        &:hover{
            background-color: lighten(@color, 30%);
        }
    }
}

.section1 {
    .color-mixin(red);
}
.section2 {
    .color-mixin(blue);
}

CSSの結果：

.section1 {
  color: #ff0000;
}
.section1 .foo {
  background-color: #cc0000;
}
.section1 a:hover {
  background-color: #ff9999;
}
.section2 {
  color: #0000ff;
}
.section2 .foo {
  background-color: #0000cc;
}
.section2 a:hover {
  background-color: #9999ff;
}​
于 2012-09-13T20:49:18.617 に答える