Verketten Sie Zeichenfolgen in Less

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?

Verwenden Sie Variable Interpolation :

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

Vollständiger Code:

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

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

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

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

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");
}

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

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

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

@images_path+'bg.png'