Haben Sie eine Variable im Bildpfad in Sass?

123

Ich möchte eine Variable haben, die den Stammpfad zu allen meinen Bildern in meiner CSS-Datei enthält. Ich kann nicht genau herausfinden, ob dies in reinem Sass möglich ist (das eigentliche Webprojekt ist nicht RoR, kann also keine Asset_Pipeline oder irgendeinen dieser ausgefallenen Jazz verwenden).

Hier ist mein Beispiel, das nicht funktioniert. Beim Kompilieren wird die erste Instanz der Variablen in der Hintergrund-URL-Eigenschaft "( "Invalid CSS after "..site/background": expected ")") blockiert .

Definieren der Funktion zum Zurückgeben des Pfads:

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

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

Verwenden der Funktion:

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

Jede Hilfe wäre dankbar.

css sass program247365
quelle

Antworten:

207

Haben Sie die Interpolationssyntax ausprobiert ?

background: url(#{$get-path-to-assets}/site/background.jpg) repeat-x fixed 0 0;
Wesley Murch
quelle
1
Es funktioniert nicht für mich, weil CssVariablesProcessor keine Variablen verarbeitet, selbst wenn es als Präprozessor vor CssDataUriPreProcessor festgelegt wurde
Alexey
1
Funktioniert auch in zitierten Pfaden, z. B. im Kompass-Schrift-Gesicht-Mixin. '#{$fontName}.ext', ..
Fleuv
Ja, es ist besser, im angegebenen Pfad zu verwenden. Andernfalls wird ein Fehler in der NetBeans-IDE angezeigt. URL ("# {$ get-path-to-assets} /site/background.jpg")
Pons Purushothaman
94

Keine Notwendigkeit für eine Funktion:

$assetPath : "/assets/images";

...

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

Einzelheiten finden Sie in den Interpolationsdokumenten .

Steveax
quelle
7
Bevorzugen Sie auf
6

Ich habe nach einer Antwort auf dieselbe Frage gesucht, aber ich glaube, ich habe eine bessere Lösung gefunden: http://blog.grayghostvisuals.com/compass/image-url/

Grundsätzlich können Sie Ihren Bildpfad in config.rb festlegen und den Hilfsprogramm image-url () verwenden

NerdCowboy
quelle
1

Den obigen richtigen Antworten etwas hinzufügen. Ich verwende NetBeans IDE und es zeigt Fehler bei der Verwendung url(#{$assetPath}/site/background.jpg)dieser Methode. Es war nur ein NetBeans-Fehler und kein Fehler beim Kompassieren von Sass. Aber dieser Fehler bricht die Code-Formatierung in Netbeans und Code wird hässlich. Aber wenn ich es in Anführungszeichen wie unten verwende, zeigt es Wunder!

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

Pons Purushothaman
quelle
0

Wir können einen relativen Pfad anstelle eines absoluten Pfads verwenden:

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

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