Dizeleri daha az birleştirme

Bunun mümkün olmadığını düşünüyorum ama bir yolu olabilir diye sorduğumu düşündüm. Buradaki fikir, web kaynak klasörüne giden yol için bir değişkenim olmasıdır:

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

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

Bunu sonuç olarak anlıyorum:

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

Ama dizelerin şu şekilde tek bir dizede birleşmesini istiyorum:

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

Less'de dizeleri bir araya getirmek mümkün mü?

Değişken Enterpolasyon Kullan :

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

Tam kod:

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

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

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

Dokümantasyonda görebileceğiniz gibi, dize enterpolasyonunu değişken ve düz dizelerle birlikte de kullanabilirsiniz:

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

Görüntüleri işlemek için aynı numarayı arıyordum. Buna cevap vermek için bir mixin kullandım:

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

O zaman şunları kullanabilirsiniz:

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

veya

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

Gibilerin birimin dize benzeri değerler için 45degde transform: rotate(45deg)kullanıma unit(value, suffix)fonksiyonu. Misal:

// 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);

Less.js veya lessphp kullanıp kullanmadığınızı bilmiyorum ( WordPress için WP-Less eklentisinde olduğu gibi ), ancak lessphp ile dizeleri "alıntı" yapabilirsiniz ~: http://leafo.net/lessphp/docs/#string_unquoting

Drupal 7 kullanıyorum. Sıradan bir artı işareti kullandım ve işe yarıyor:

@images_path+'bg.png'