treehouse : what would you like to learn today?
Web Design Web Development iOS Development

SASS: Compass adding slash infront of images directory when creating sprites

  • I am using Compass/SCOUT to create sprites. It creates fine, but the css output is pointing to the wrong images directory (Adding extra Forward SLASH infront of the images directory) like so:

    .icon-sprite {
      background: url('/images/icon-s6f4a44e28d.png') no-repeat;
    }
    

    instead of:

    .icon-sprite {
      background: url('images/icon-s6f4a44e28d.png') no-repeat;
    }
    

    I am using style.scss to call sprites like so:

    @import "compass";
    @import "icon/*.png";
    

    and config.rb:

    http_path = "/"
    css_dir = ""
    sass_dir = "scss"
    images_dir = "images"
    

    When tried to uncomment #relative_assets = true, it gives me an error.

    Any sugestions please!

  • Just an idea.
    In config.rb try this...

    images_dir = "./images"
    
  • @hotpink Thank you, and that still shows a wrong directory, like so:

    .icon-sprite {
      background: url('/./images/icon-s6f4a44e28d.png') no-repeat;
    }
    
  • Change

      http_path = "/"
    

    To

      http_path = ""
    

    That should remove the slash

  • @Htmlmainiac, Thank you but that did not work for me. Here are my directory system http://i.imgur.com/EwYVq.png

  • Change

    http_path ='/'
    

    To

    http_path ='./'
    

    That would eliminate the slash.