wake-up-neo.com

Verketten Sie Zeichenfolgen in Less

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

@root: "../img/";
@file: "test.css";
@url: @[email protected];

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

Ich bekomme das als Ergebnis:

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

Aber ich möchte, dass die Zeichenfolgen wie folgt zu einer Zeichenfolge kombiniert werden:

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

Ist es möglich, Zeichenfolgen in Less zu verketten?

csspathweblessconcat
124
juminoz

Verwenden Sie Variable Interpolation :

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

Vollständiger Code:

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

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

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

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");
29
Stephan Hoyer

Ich habe nach dem gleichen Trick für den Umgang mit Bildern gesucht. Ich habe ein Mixin benutzt, um das 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");
}
12
user2725509

Verwenden Sie für die Zeichenfolgen-ähnlichen Einheitenwerte wie 45deg In transform: rotate(45deg) die Funktion unit(value, suffix). 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);
8
jordanb

Weiß nicht, ob du less.js oder lessphp (wie in WP-Less Plugin für WordPress) verwendest, aber mit lessphp kannst du Strings mit ~: http://leafo.net/lessphp/docs/#string_unquoting

7
FelipeAls