2

いくつかのインデックス付き変数（この場合は色）をループして、それぞれのクラスを作成しようとしています。これに沿った何か：

@colour-1: #FF0000;
@colour-name-1: "red";

.loop (@index) when (@index > 0) {
  @colour: ~"@{colour-@{index}}";
  @name: "@{colour-name-@{index}}";

  (~'*[data-colour="@{name}"]') {
    background-color: @colour;
    background-color: hsla(hue(@colour), saturation(@colour), lightness(@colour), 0.5);
  }

  .loop(@index - 1);
}
.loop (0) {}
.loop (1);

IE <9のフォールバック変数を提供するのではなく、ミックスイン内の各色/値をプログラムで更新して、RGBAバージョンとHexバージョンの両方を提供したいと思います。問題は、@ {@ var}が事後まで評価されないため、色として解析されないことです。

参照によって渡されないように変数をエスケープする方法はありますか？ここに出力を示すJSFiddle：http: //jsfiddle.net/Qj2cZ/

4

2 に答える 2

3

変数への複数の参照は、間違いなくカラー関数で問題を引き起こしています。これはバグの可能性があります。LESS 1.3.3 以下の解決策は思いつきませんでした。

@coloursしかし、私は LESS の最新 (現在はベータ版) バージョン (1.4) で、2 つの大きな「配列」型変数を作成@colour-namesし、個別に定義されたすべての色変数を配置することで、有効な解決策を思いつきました。次に、新しいextract()関数を使用してループ内のそれらにアクセスすると、必要なものを取得できます。現時点で 1.4 を選択できるかどうかは、あなたが判断する必要があります。

LESS 1.4 働く

LESS コード

@num-colours: 3;

@colour-1: #FF0000;
@colour-name-1: "red";
@colour-2: #00FF00;
@colour-name-2: "green";
@colour-3: #0000FF;
@colour-name-3: "blue";

@colours: @colour-1 @colour-2 @colour-3;
@colour-names: @colour-name-1 @colour-name-2 @colour-name-3;

.define-colours-loop (@index) when (@index =< @num-colours) {
  @colour: extract(@colours, @index);
  @name: extract(@colour-names, @index);

  *[data-colour="@{name}"] {
    background-color: @colour;
    background-color: hsla(hue(@colour), saturation(@colour), lightness(@colour), 0.5);
  }

  .define-colours-loop((@index + 1));
}
.define-colours-loop (0) {}
.define-colours-loop (1);

CSS出力

*[data-colour="red"] {
  background-color: #ff0000;
  background-color: rgba(255, 0, 0, 0.5);
}
*[data-colour="green"] {
  background-color: #00ff00;
  background-color: rgba(0, 255, 0, 0.5);
}
*[data-colour="blue"] {
  background-color: #0000ff;
  background-color: rgba(0, 0, 255, 0.5);
}
于 2013-03-20T15:34:55.847 に答える
1

さらに調査すると（そして少し息抜きをした後）、v1.3.3未満の有効なソリューションが見つかりました。v1.4 を使用している場合でも、バグを回避するため、ScottS の回答をお勧めします。

前述のように、変数が color() 関数に間に合うように解析されないという問題があります。ただし、変数がある関数で評価され、色への変換のために別の関数に渡される場合、すべて正常に機能します。したがって、次は必要なスタイルを出力します。

@colour-1: #FF0000;
@colour-name-1: "red";

.loop (@index) when (@index > 0) {
  @colour: ~"@{colour-@{index}}";
  @name: "@{colour-name-@{index}}";
  .setColour(@colour, @name);
  .loop(@index - 1);
}

.setColour (@colour-string, @name) {
  @colour: color(@colour-string);
  (~'*[data-colour="@{name}"]') {
    background-color: @colour;
    background-color: hsla(hue(@colour), saturation(@colour), lightness(@colour), 0.5);
  }
}

.loop (0) {}
.loop (1);

JSFiddle はこちら: http://jsfiddle.net/LJ3zX/

于 2013-03-24T07:59:37.770 に答える