Verketten Sie Zeichenfolgen in Less

129

Ich denke, das ist nicht möglich, aber ich dachte, ich frage, falls es einen Weg gibt. Die Idee ist, dass ich eine Variable für den Pfad zum Webressourcenordner habe:

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

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

Ich bekomme das als Ergebnis:

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

Ich möchte jedoch, dass die Zeichenfolgen wie folgt zu einer Zeichenfolge kombiniert werden:

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

Ist es möglich, Zeichenfolgen in Less miteinander zu verknüpfen?

css path web less concat Juminoz
quelle

225

Verwenden Sie Variable Interpolation :

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

Vollständiger Code:

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

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

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

Paul
quelle

Danke für die Antwort! Dies ist perfekt. Jetzt kann ich sicherstellen, dass es auch dann keinen Refactoring-Albtraum gibt, wenn sich der Kontextpfad ändert.

Juminoz

Danke, ich bin gerade auf das gleiche Problem gestoßen und habe es in den Dokumenten verpasst.

David

Danke @Paulpro! Ich hatte ein Problem mit dem VS Web Compiler-Add-On, bei dem meine Hintergrundbild-URL

geändert wurde

6

Nur eine Anmerkung für Personen, die möglicherweise auf diese Antwort stoßen, aber versuchen, sie zu verwenden, z. B. um eine numerische Variable mit einer Zeichenfolge wie pxoder zu kombinieren %: Sie können die ~width: ~"@{w}px";

Angabe

29

Wie Sie in der Dokumentation sehen können , können Sie die Zeichenfolgeninterpolation auch mit variablen und einfachen Zeichenfolgen zusammen verwenden:

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

Stephan Hoyer
quelle

12

Ich suchte nach dem gleichen Trick für den Umgang mit Bildern. Ich habe ein Mixin verwendet, um dies zu beantworten:

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

Dann können Sie verwenden:

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

oder

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

user2725509
quelle

Hallo und Willkommen! Warum ist die akzeptierte Antwort Ihrer Meinung nach nicht mehr gültig? ist es veraltet? Gab es eine technologische Verbesserung? Es ist falsch? warum ist deins besser

STT LCU

9

Für solche stringartigen Einheitswerte wie 45degin transform: rotate(45deg)wird die unit(value, suffix)Funktion verwendet. Beispiel:

// 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
quelle

1

Beantwortet die Frage technisch nicht, ist aber dennoch ein nützlicher Trick.

Trysis

7

Sie wissen nicht, wenn Sie mit less.js oder lessphp (wie in WP-Less - Plugin für Wordpress) , aber mit lessphp Sie können „unquote“ Strings mit ~: http://leafo.net/lessphp/docs/#string_unquoting

FelipeAls
quelle

1

Dies funktioniert auch mit normalem WENIGER. Ich weiß nicht, ob es 2012 war, als diese Antwort geschrieben wurde.

Trysis

-7

Verwenden von Drupal 7. Ich habe ein gewöhnliches Pluszeichen verwendet und es funktioniert:

@images_path+'bg.png'

Gaba
quelle

5

Ich halte Ihren Vorschlag für wertlos, es sei denn, er lernt Drupal bereitwillig, nur damit Concat-Strings es in LESS / CSS verwenden können. Nichts für ungut, sage ich nur.

Ozanmuyes

Verketten Sie Zeichenfolgen in Less

Antworten: