CODEWITHSUNDEEP
importspritecompass-sasssass
Daniel Ramirez-Escudero
Daniel Ramirez-Escudero

Reputation: 4047

SASS sprite url working but image not displayed

I'm new at Compass and I'm very interested in the sprite generator. I see it works fine. I followed a tutorial and I'm having some problems with my sprite. I inserted the files inside the folder called spr. I already inserted the following code in the file screen.scss:

@import "spr/*.png";

And inserted the following for my header:

h1{
        @include spr-sprite(Flickr);
        height: 91px;
    }

I checked in inspector and the url is correct and the background position also. The problem is that once checked in the inspector element it cannot open the image url. The picture generated does work in the finder but its as the file doesnt exist. The name and location are perfect.

Could anybody let me know if they had this same problem and especially how to solve it?

Edit: Generated CSS

.spr-sprite, header h1 {
    background: url('/images/spr-sbd3b4dd92d.png') no-repeat;
}
header h1 {
    background-position: 0 -120px; height: 91px;
}

Upvotes: 0

Views: 658

Answers (1)

steveax
steveax

Reputation: 17753

Not familiar with Scout, but...

Right now Sass is using root relative paths (leading slash). In order for those to resolve:

  • You must be using a local server of some kind and loading the pages over http (http://... in the browsers url bar)

  • The site must be at the root of the web folder (not in a sub folder)

For example:

├── css
│   └── site.css
├── images
│   └── spr-sbd3b4dd92d.png
├── index.html
└── sub-folder
    └── index.html

If you wish to have the site root in a subfolder, or be able to load the pages in a browser using the file:// protocol, you should enable relative paths in config.rb:

relative_assets = true

If that is already uncommented (viz: no leading #) in your config.rb then Scout must not be paying any attention to the config file.

Looks like it might be a bug in Scout.

Upvotes: 1

Related Questions