Połącz ciągi w Less

130

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?

juminoz
źródło

Odpowiedzi:

226

Użyj interpolacji zmiennej :

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

Pełny kod:

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

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

.px{ background-image: url(@url); }
Paweł
źródło
Dziękuję za odpowiedź! To jest doskonałe. Teraz mogę się upewnić, że nawet jeśli zmieni się ścieżka kontekstu, nie będzie koszmaru refaktoryzacji.
juminoz
Dzięki, właśnie natknąłem się na ten sam problem i przegapiłem to w dokumentach.
David
Dzięki @Paulpro! Miałem problem z dodatkiem VS Web Compiler, w którym zmieniał mój adres URL obrazu tła i nie byłem pewien, jak zrobić konkatenację :)
hatsrumandcode
7
Tylko uwaga dla osób, które mogą trafić na tę odpowiedź, ale próbują jej użyć, np. Do połączenia zmiennej numerycznej z ciągiem znaków, takim jak pxlub %: Możesz ~width: ~"@{w}px";
cofnąć
29

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");
Stephan Hoyer
źródło
12

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");
}
user2725509
źródło
Cześć i witaj! dlaczego uważasz, że zaakceptowana odpowiedź nie jest już ważna? czy to jest nieaktualne? czy nastąpiła poprawa technologii? To jest źle? dlaczego twój jest lepszy?
STT LCU
9

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);
jordanb
źródło
1
Technicznie nie odpowiada na pytanie, ale nadal jest użyteczną sztuczką.
trysis
-7

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

@images_path+'bg.png'
Gaba
źródło
5
Myślę, że twoja sugestia jest bezwartościowa, chyba że chętnie nauczy się Drupala tylko po to, aby połączyć ciągi znaków, aby używać go w LESS / CSS. Bez obrazy, tylko mówię.
ozanmuyes