Lessで文字列を連結する


129

これは無理だと思いますが、道があればお願いしたいと思いました。アイデアは私がウェブリソースフォルダへのパスの変数を持っているということです:

@root: "../img/";
@file: "test.css";
@url: @root@file;

.px {
    background-image: url(@url);
}

結果としてこれが得られます:

.px { background-image: url("../img/" "test.css"); }

しかし、私は文字列を次のように1つの文字列に結合したいと思います。

.px { background-image: url("../img/test.css"); }

Lessで文字列を連結することは可能ですか?

回答:


225

変数補間を使用:

@url: "@{root}@{file}";

完全なコード:

@root: "../img/";
@file: "test.css";

@url: "@{root}@{file}";

.px{ background-image: url(@url); }

答えてくれてありがとう!これは完璧です。これで、コンテキストパスが変更されても、リファクタリングの悪夢がないことを確認できます。
juminoz 2012

おかげで、同じ問題に遭遇し、ドキュメントでそれを見逃しました。
David

@Paulpro、ありがとう!VS Webコンパイラアドオンに問題があり、背景画像のURLが変更されていたため、連結の方法がわかりませんでした:)
hatsrumandcode

6
ただ、この回答に着陸かもしれない人々のためのノートが、のような文字列と数値変数を組み合わせることなど、それを使用しようとしているpx%:あなたは、事前に保留それチルダとのことで、文字列をアンクォートすることができます~よう、:width: ~"@{w}px";
AsGoodAsItGets


12

画像を処理するための同じトリックを探していました。私はこれに答えるためにミックスインを使いました:

.bg-img(@img-name,@color:"black"){
    @base-path:~"./images/@{color}/";
    background-image: url("@{base-path}@{img-name}");
}

それからあなたは使うことができます:

.px{
    .bg-img("dot.png");
}

または

.px{
    .bg-img("dot.png","red");
}

こんにちは、いらっしゃい!なぜあなたは受け入れられた答えがもはや有効ではないと思うのですか?それは時代遅れですか?技術の改善はありましたか?それは間違っています?なぜあなたの方がいいの?
STT LCU

9

関数45degtransform: rotate(45deg)使用するような文字列のような単位値のunit(value, suffix)場合。例:

// Mixin
.rotate(@deg) {
  @rotation: unit(@deg, deg);
  -ms-transform: rotate(@rotation);
  transform: rotate(@rotation);
}

// Usage
.rotate(45);

// Output
-ms-transform: rotate(45deg);
transform: rotate(45deg);

1
技術的な質問には答えませんが、それでも便利なトリックです。
トリシス


-7

Drupal 7を使用しています。私は通常のプラス記号を使用しており、機能しています。

@images_path+'bg.png'

5
彼がDrupalをLESS / CSSで使用する連結文字列のためだけに喜んで学習しない限り、あなたの提案は価値がないと思います。罪はない、私は言っているだけです。
ozanmuyes 2013
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.