Concatena le stringhe in meno

116

Penso che questo non sia possibile, ma ho pensato di chiederlo in caso ci fosse un modo. L'idea è che ho una variabile per il percorso di cartella delle risorse web:Concatena le stringhe in meno

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

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

ottengo questo come un risultato:

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

Ma, voglio le stringhe di combinare in un'unica stringa in questo modo:

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

È possibile concatenare stringhe insieme in Meno?

fonte

2012-04-21 juminoz

201

Uso Variable Interpolation:

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

codice completo:

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

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

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

fonte

2012-04-21 05:18:39 Paulpro

Grazie per la risposta! Questo è perfetto. Ora posso assicurarmi che anche se il percorso di contesto cambia, non ci sarà un incubo di refactoring. – juminoz

Grazie, mi sono appena imbattuto nello stesso problema e lo sono mancato nei documenti. – David

Grazie a @Paulpro! Stavo avendo un problema con il componente aggiuntivo VS Web Compiler, dove stava cambiando il mio URL di background-image, e non ero troppo sicuro di come fare la concatenazione :) –

Non so se si sta utilizzando less.js o lessphp (come in WP-Less plug-in per WordPress), ma con lessphp si può " "stringhe" con ~:

fonte

2012-04-21 05:19:27 FelipeAls

Funziona anche con LESS regolare. Non so se è successo nel 2012 quando è stata scritta questa risposta. – trysis

-7

Utilizzo di Drupal 7. Ho usato un segno più normale e funziona:

@images_path+'bg.png'

fonte

2013-02-14 12:47:56 Gaba

A meno che non sia disposto ad imparare Drupal solo per le stringhe concatenate per usarlo in LESS/CSS, penso che il tuo suggerimento sia inutile. Senza offesa, sto solo dicendo. – ozanmuyes

Stavo cercando lo stesso trucco per la gestione delle immagini. Ho usato un mixin per rispondere a questa:

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

quindi è possibile utilizzare:

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

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

fonte

2013-08-28 13:20:35 user2725509

Ciao e benvenuto! perché pensi che la risposta accettata non sia più valida? è obsoleto? c'è stato un miglioramento tecnologico? È sbagliato? perché la tua è migliore? –

Come si può vedere nel documentation, è possibile utilizzare stringa di interpolazione anche con stringhe variabili e semplici insieme:

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

fonte

2013-10-18 15:32:30

Per quei valori di tipo stringa come 45deg in transform: rotate(45deg) utilizzare la funzione unit(value, suffix). Esempio:

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

fonte

2015-11-19 02:31:15 jordanb

Non risponde tecnicamente alla domanda, ma è comunque un trucco utile. – trysis

Concatena le stringhe in meno

risposta

Problemi correlati