QA@IT

LESSで文字列連結はできますか?

5122 PV

LESSの変数に文字列を入れて,その変数と別の文字列を連結したいのですが,下記のようなコードでは実現できませんでした。

@path : '/img/common/';
@bg_img : @path+'bg.png';

#test{
  background-image: url(@bg_img);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

期待する結果はbackground-image: url('/img/common/bg.png');なのですが,コンパイル後のコードは以下のようになります。

#test {
  background-image: url('/img/common/' 'bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

正しく文字列連結を行う方法はあるのか,教えていただければと思います。

回答

@path : '/img/common/';
@bg_img : "@{path}bg.png";

#test {
  background-image: url(@bg_img);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
#test {
  background-image: url("/img/common/bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

でいかがでしょうか?

展開後の文字列を引用符で囲みたくない場合は

.rotate(@rotation: 0) {
  @degs: ~"@{rotation}deg";
  -webkit-transform: rotate(@degs);
  -moz-transform: rotate(@degs);
}

.demo {
  .rotate(150);
}
.demo {
  -webkit-transform: rotate(150deg);
  -moz-transform: rotate(150deg);
}

といったかたちに~を頭につけると良いです。

編集 履歴 (1)
  • 解決できました。
    引用符を取り除けるのはとても助かる情報でした。CSSの記述がもっと楽にできそうです。
    ありがとうございました。
    -

http://less-ja.studiomohawk.com/
によると

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

JavaScript表現を.lessファイル内で実行するには表現をバックティックスで囲んでください:
@var: `"hello".toUpperCase() + '!'`;
上記は以下のように評価されます:
@var: "HELLO!";

のように記述されているので、
提示の記述をするには

@bg_img : `@path+'bg.png'`;

でどうでしょう。

編集 履歴 (3)
  • 解決できました。
    文字列内で変数を展開する場合{}で囲めばよいのですね。
    ありがとうございました。
    -
ウォッチ

この質問への回答やコメントをメールでお知らせします。