Grow your CSS skills. Land your dream job.

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

  • jdk
    # December 23, 2012 at 10:50 pm

    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!

    # December 24, 2012 at 1:17 pm

    Just an idea.

    In config.rb try this…

    images_dir = “./images”

    jdk
    # December 24, 2012 at 2:45 pm

    @hotpink Thank you, and that still shows a wrong directory, like so:

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

    # December 24, 2012 at 3:30 pm

    Change

    http_path = “/”

    To

    http_path = “”

    That should remove the slash

    jdk
    # December 24, 2012 at 4:25 pm

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

    # December 27, 2012 at 7:13 pm

    Change

    http_path =’/’

    To

    http_path =’./’

    That would eliminate the slash.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".