Połącz ciągi w Less

Myślę, że nie jest to możliwe, ale pomyślałem, że zapytam na wypadek, gdyby był sposób. Chodzi o to, że mam zmienną ścieżki do folderu zasobów sieciowych:

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

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

Otrzymuję to w wyniku:

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

Ale chcę, aby ciągi łączyły się w jeden ciąg w następujący sposób:

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

Czy w Less można łączyć ciągi znaków?

Użyj interpolacji zmiennej :

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

Pełny kod:

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

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

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

Jak widać w dokumentacji , interpolacji ciągów można używać również razem z ciągami zmiennymi i zwykłymi:

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

Szukałem tej samej sztuczki do obsługi obrazów. Użyłem miksera, aby odpowiedzieć na to pytanie:

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

Następnie możesz użyć:

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

lub

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

Dla tych wartości jednostek w kształcie łańcucha, takich jak 45degw transform: rotate(45deg)użyciu unit(value, suffix)funkcji. Przykład:

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

Nie wiem, czy używasz less.js czy lessphp (jak we wtyczce WP-Less do WordPressa), ale z lessphp możesz „usunąć cytaty” za pomocą ~: http://leafo.net/lessphp/docs/#string_unquoting

Używam Drupala 7. Użyłem zwykłego znaku plus i działa:

@images_path+'bg.png'