Masz zmienną w ścieżce obrazów w Sassie?

123

Chcę mieć jedną zmienną, która zawiera ścieżkę główną do wszystkich moich obrazów w moim pliku CSS. Nie mogę się do końca dowiedzieć, czy jest to możliwe w czystym Sassie (rzeczywisty projekt sieciowy nie jest RoR, więc nie mogę użyć asset_pipeline ani żadnego z tego fantazyjnego jazzu).

Oto mój przykład, który nie działa. Podczas kompilacji odrzuca pierwszą instancję zmiennej we właściwości adresu URL tła, mówiącą ( "Invalid CSS after "..site/background": expected ")").

Zdefiniowanie funkcji zwracającej ścieżkę:

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

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

Korzystanie z funkcji:

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

Każda pomoc będzie mile widziana.

css sass program247365
źródło

Odpowiedzi:

207

Czy wypróbowałeś składnię interpolacji ?

background: url(#{$get-path-to-assets}/site/background.jpg) repeat-x fixed 0 0;
Wesley Murch
źródło
1
Dla mnie to nie działa, ponieważ CssVariablesProcessor nie przetwarza zmiennych, nawet jeśli jest ustawiony jako preprocesor przed CssDataUriPreProcessor
Alexey
1
Działa również w przypadku ścieżek cytowanych, np. W mieszaniu czcionek kompasu z twarzą. '#{$fontName}.ext', ..
Fleuv
Tak, lepiej użyć w cudzysłowie. W przeciwnym razie pokazuje błąd w netbeans IDE. url („# {$ get-path-to-asset} /site/background.jpg”)
Pons Purushothaman,
94

Nie potrzeba funkcji:

$assetPath : "/assets/images";

...

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

Szczegółowe informacje można znaleźć w dokumentacji interpolacji .

steveax
źródło
7
Zdecydowanie wolę zwięzłość ze wskazaniem bezpośrednio na zmienną
skia.heliou
1

Dodanie czegoś do powyższych poprawnych odpowiedzi. Używam netbeans IDE i pokazuje błąd podczas korzystania z url(#{$assetPath}/site/background.jpg)tej metody. To był po prostu błąd netbeans i żadnego błędu w kompilacji sass. Ale ten błąd formatowania kodu łamanego w netbeanach i kod staje się brzydki. Ale kiedy używam go w cudzysłowach, jak poniżej, okazuje się dziwne!

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

Pons Purushothaman
źródło
0

Możemy użyć ścieżki względnej zamiast ścieżki bezwzględnej:

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

.logo {
    max-width: 65px;
    @include logo;
 }
Aarji George
źródło