Hai una variabile nel percorso delle immagini in Sass?

123

Voglio avere una variabile che contenga il percorso principale di tutte le mie immagini nel mio file CSS. Non riesco a capire se questo sia possibile in puro Sass (il progetto web attuale non è RoR, quindi non posso usare asset_pipeline o qualsiasi di quel jazz stravagante).

Ecco il mio esempio che non funziona. Alla compilazione si blocca alla prima istanza della variabile nella proprietà url di sfondo dicendo ( "Invalid CSS after "..site/background": expected ")").

Definizione della funzione per restituire il percorso:

//Vars
$assetPath : "/assets/images";

//Functions
@function get-path-to-assets($assetPath){
  @return $assetPath;
}

Utilizzando la funzione:

body {
  margin: 0 auto;
  background: url($get-path-to-assets/site/background.jpg) repeat-x fixed 0 0;
  width: 100%; }

Qualsiasi aiuto sarebbe apprezzato.

css sass

— program247365
fonte

207

Hai provato la sintassi Interpolation ?

background: url(#{$get-path-to-assets}/site/background.jpg) repeat-x fixed 0 0;

— Wesley Murch
fonte

1

Non funziona per me perché CssVariablesProcessor non elabora le variabili anche se è impostato come preprocessore prima di CssDataUriPreProcessor

— Alexey

1

Funziona anche nei percorsi tra virgolette, ad esempio nel mix di caratteri e caratteri della bussola. '#{$fontName}.ext', ..

— Fleuv

Sì, è meglio usare nel percorso tra virgolette. Altrimenti mostra errori nell'IDE di netbeans. url ("# {$ get-path-to-assets} /site/background.jpg")

— Pons Purushothaman

94

Non c'è bisogno di una funzione:

$assetPath : "/assets/images";

...

body {
  margin: 0 auto;
  background: url(#{$assetPath}/site/background.jpg) repeat-x fixed 0 0;
  width: 100%; }

Vedere i documenti di interpolazione per i dettagli.

— steveax
fonte

7

Sicuramente preferisco la brevità con il puntamento diretto alla variabile

— skia.heliou

6

Stavo cercando una risposta alla stessa domanda, ma penso di aver trovato una soluzione migliore: http://blog.grayghostvisuals.com/compass/image-url/

Fondamentalmente, puoi impostare il percorso dell'immagine in config.rb e utilizzare l'helper image-url ()

— NerdCowboy
fonte

1

Aggiungendo qualcosa alle risposte corrette sopra. Sto usando netbeans IDE e mostra errori durante l'utilizzo di url(#{$assetPath}/site/background.jpg)questo metodo. Era solo un errore di netbeans e nessun errore nella compilazione di sass. Ma questo errore interrompe la formattazione del codice in netbeans e il codice diventa brutto. Ma quando lo uso tra virgolette come sotto, mostra meraviglia!

url("#{$assetPath}/site/background.jpg")

— Pons Purushothaman
fonte

0

Possiamo usare il percorso relativo invece del percorso assoluto:

$assetPath: '~src/assets/images/';
$logo-img: '#{$assetPath}logo.png';
@mixin logo {
  background-image: url(#{$logo-img});
}

.logo {
    max-width: 65px;
    @include logo;
 }

— Aarji George
fonte