131

これは不可能だと思いますが、方法があればお願いしたいと思いました。アイデアは、Webリソースフォルダーへのパスの変数があるということです。

@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で文字列を連結することは可能ですか？

4

6 に答える 6

234

変数補間を使用する：

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

完全なコード：

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

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

.px{ background-image: url(@url); }
于 2012-04-21T05:18:39.527 に答える
30

ドキュメントでわかるように、変数文字列とプレーン文字列を一緒に使用して文字列補間を使用することもできます。

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
于 2013-10-18T15:32:30.717 に答える
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");
}
于 2013-08-28T13:20:35.677 に答える
9

45deg関数をtransform: 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);
于 2015-11-19T02:31:15.403 に答える
7

less.jsとlessphpのどちらを使用しているかはわかりませんが（ WordPressのWP-Lessプラグインのように）、lessphpを使用すると、次の文字列を「引用解除」できます：http ~: //leafo.net/lessphp/docs/#string_unquoting

于 2012-04-21T05:19:27.420 に答える
-7

Drupal 7を使用します。通常のプラスマークを使用しましたが、機能しています。

@images_path+'bg.png'
于 2013-02-14T12:47:56.637 に答える