Concatenate strings in Less

Myślę, że to nie jest możliwe, ale pomyślałem, że zapytam, jeśli jest jakiś sposób. Chodzi o to, że mam zmienną dla ścieżki do folderu zasobów sieci web: 

@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 połączyły się w jeden ciąg w ten sposób: 

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

Czy możliwe jest łączenie łańcuchów w mniej?

Author: Volker E., 2012-04-21
Source

6 answers

Użyj Interpolacji Zmiennej :

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

Pełny kod: 

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

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

.px{ background-image: url(@url); }
 205
Author: Paulpro,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-06-11 15:44:31

Jak widać w dokumentacji , Można używać interpolacji łańcuchów również ze zmiennymi i ciągami prostymi razem: 

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
 29
Author: Stephan Hoyer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-04 07:37:19

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

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

Wtedy możesz użyć : 

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

Lub 

.px{
    .bg-img("dot.png","red");
}
 11
Author: user2725509,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-08-28 13:20:35

Nie wiem, czy używasz mniej.js lub lessphp (jak w WP-less plugin dla WordPressa), ale z lessphp można "wyróżnić" Ciągi z ~ : http://leafo.net/lessphp/docs/#string_unquoting

 7
Author: FelipeAls,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-04-21 05:19:27

Dla tych ciągów podobnych do wartości jednostkowych, takich jak 45deg w transform: rotate(45deg) Użyj funkcji unit(value, suffix). 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);
 5
Author: jordanb,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-19 17:38:43

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

@images_path+'bg.png'
 -7
Author: Gaba,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-14 12:47:56