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

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

6

Szukałem odpowiedzi na to samo pytanie, ale myślę, że znalazłem lepsze rozwiązanie: http://blog.grayghostvisuals.com/compass/image-url/

Zasadniczo możesz ustawić ścieżkę obrazu w config.rb i użyć helpera image-url ()

— NerdCowboy
źródło

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