3

ちょっとした質問があります...複数の背景をLESSと組み合わせるオプションはありますか?

LESSのバックグラウンド用にこのセットアップがあります：

.background_centered(
  @url,
  @position_horizontal: center,
  @position_vertical: top,
  @background-repeat: no-repeat,
  @transparency: transparent) {
    background: @arguments;
}

今：複数の背景を持つ出力スタイルで書く必要があるので、これを行います：

.class {
   .background_centered(url('../img/war_top_baner_gp.png'),url('../img/war_header_bg.png'));
}

最終出力で何かが正しくない bc 私はこれを持っています:

background: url('/../img/war_top_baner_gp.png') 
            url('/../img/war_header_bg.png') top no-repeat transparent;

なにが問題ですか？そうすることが可能かどうか？

4

4 に答える 4

10

ミックスインのすべての引数を適用/ループする機能があまりネイティブにないことは認識していませんが、これを克服する方法はたくさんあります。

必要なことを行うカスタム JavaScript 関数を less ブロックに追加できます。これは、カスタム関数の優れたリファレンスへのリンクです。

しかし、less で小さなループを構築することもできます。

    // for loop
    .for(@l,@obg,@i:1) when (@l > @i) {
      @nbg: `@{url}[@{i}]`;
      @bg: ~"@{obg}, @{nbg} @{rest}";
      .for(@l, @bg, @i + 1);
    }

    // multiple background urls + additional bg properties
    .bgmixin(@url, @rest){
      @num: unit(`@{url}.length`);
      @bg: ~`@{url}[0]` @rest;
      .for(@num, @bg);
      background: ~"@{bg}";
    }

    // defining bg urls
    @url: 'url("../img/war_top_baner_gp.png")', 'url("../img/war_header_b‌g.png")';

    // including the bgmixin in .class
    .class{
      .bgmixin(@url, center top no-repeat transparent);
    }

そして、出力は

    .class {
          background: url("../img/war_top_baner_gp.png") center top no-repeat transparent,
                      url("../img/war_header_b‌g.png") center top no-repeat transparent;
    }

私があなたを正しく理解していれば、これはあなたが望んでいたことです.

編集：ここでの私の考えは、配列要素を実際にループ/再帰するより一般的なソリューションを見つけることであったことをここに追加したかっただけです。これにより、それぞれの画像で異なる属性を簡単に使用できるようになります-関数に配列をフィードしますURL とその他の属性の配列。ここでは、アイデアを説明しようとします。

    .for(@l,@obg,@i:1) when (@l > @i) {
      @nbg: `@{url}[@{i}]`; @nattr: `@{attr}[@{i}]`;;
      @bg: "@{obg}, @{nbg} @{nattr}";
      .for(@l, @bg, @i + 1);
    }

    .bgmixin(@url, @attr){
      @num: unit(`@{url}.length`);
      @bg: ~`@{url}[0]` ~`@{attr}[0]`;
      .for(@num, @bg);
      background: ~"@{bg}";
    }

    @urls: "url('../img/centered_image_bg.png')", "url('../img/left_image_bg.png')";
    @attr: "center top no-repeat transparent", "left top y-repeat";

    .class{
      .bgmixin(@urls, @attr);
    }

出力は次のようになります。

    .class {
        background: url('../img/centered_image_bg.png') center top no-repeat transparent,
                    url('../img/left_image_bg.png') left top y-repeat;
    }
于 2013-03-14T18:26:12.657 に答える
5

LESSでは、複数のプロパティ値を1つのプロパティに渡すことは困難です。現在のコードは、明らかに単一の背景でうまく機能します。複数を取得するには、通常、文字列を操作する必要があります。

以下では、複数のURLを単一の文字列として最初のパラメーターに渡すことで入力し、インラインJavaScriptを使用して文字列を置き換え、それらのURLを他のパラメーターに連結します。

以下

.background_centered(
  @urls,   
  @position_horizontal: center,
  @position_vertical: top,
  @background-repeat: no-repeat,
  @transparency: transparent ) {

  @combinedValues: ~"@{position_horizontal} @{position_vertical} @{background-repeat} @{transparency}";
  @urlsRewrite: ~`@{urls}.replace(/\)/g, ') @{combinedValues}')`;
  background: @urlsRewrite;
}

.class {
   .background_centered("url('../img/war_top_baner_gp.png'), url('../img/war_header_bg.png')");
}

出力

.class {
  background: url('../img/war_top_baner_gp.png') center top no-repeat transparent, url('../img/war_header_bg.png') center top no-repeat transparent;
}
于 2013-03-14T18:39:58.657 に答える
1

コンマ区切りの引数のリストを mixin に渡すには;、mixin 呼び出しでコンマの代わりに使用します。

 .mixin(@bg, @color) {
   background: @bg;
   color: @color;
 }

 .class {
   .mixin(url('img/bg.png') no-repeat, red; white);
 }

出力:

.class {
  background: url('img/bg.png') no-repeat, #ff0000;
  color: #ffffff;
}
于 2013-10-11T08:02:56.277 に答える