sass - 带有 Webroot 文件夹的 compass Sprite 表路径

Question

几天来，我一直在与 Compass Sprites 的路径作斗争。

我的网站具有以下结构:

+ project
    - config.rb
    + application
        + scss
            - _base.scss
            - main.scss
            - ...
    + public (webroot)
        + js
        + css
            - main.css
        + images
            + sprites
                - boxarrow.png
                - boxcheck.png
                - ...

我的 config.rb 最初看起来像:

http_path = "/"
css_dir = "public/css"
sass_dir = "application/scss"
images_dir = "public/images"
javascripts_dir = "public/js"

在我的 scss 文件中，我使用以下内容来扫描我的 Sprite :

$sprites: sprite-map("sprites/*.png");

并将它们与我写的 mixin 一起使用:

@mixin scaled-sprite-background($name, $scale, $spritemap) {
    background: $spritemap;

    $spritePath: sprite-path($spritemap);
    @include background-size(image-width($spritePath) * $scale);

    $position: sprite-position($spritemap, $name);
    background-position: (nth($position, 1) * $scale) (nth($position, 2) * $scale);

    height: image-height(sprite-file($spritemap, $name)) * $scale;
    width: image-width(sprite-file($spritemap, $name)) * $scale;
}

问题是我的 Sprite 路径出现了 ala public/images/sprites-s500a0fe4b1.png而他们不应该有公众/。

我删除了 public/所以我只有 images_dir = "images"但现在 compass 无法找到我的图像。

我设置了 http_path = "public"并获得双公开 public/public/images/sprites-s500a0fe4b1.png
我使用 images_path 尝试了更多配置，但无济于事。

我目前的工作黑客如下:

http_path = "/"
css_dir = "public/css"
sass_dir = "application/scss"
images_dir = "images"
images_path = "public/images"
javascripts_dir = "public/js"

on_sprite_saved do |filename|
  FileUtils.mv(filename, images_path + "/" + File.basename( filename )) if File.exists?(filename)
end

它不漂亮，但它有效。当然需要有更好的方法!

任何帮助将不胜感激。

Answer 1

相对 Assets

如果你想使用图像和 CSS 之间的相对路径(即 background: url('../images/foo.png') )，你必须添加 relative_assets = true在您的配置文件中:

css_dir = "public/css"
sass_dir = "application/scss"
images_dir = "public/images"
javascripts_dir = "public/js"
relative_assets = true

有了这个， compass 将忽略 http_path选项并将生成对相对于 CSS 文件路径位置的图像的访问。

绝对 Assets

如果您想使用绝对路径来访问您的图像(即 background: url('/images/foo.png') ，根据 configuration reference ，请记住本地路径 *_path 与完整的 http 路径 http_*_path 不同。

因此，要访问存储在 public/images 中的图像当 webroot 是 public ，你必须分两次工作:

您必须告诉 Compass 图片存储在本地 public/images目录:images_dir = "public/images" .

必须配置完整的 http 路径:http_images_path = "/images"对于常规图像(当您使用助手 image-url() 时)和 http_generated_images_path = "/images"对于生成的 Sprite 。

最终的配置文件变成:

css_dir = "public/css"
sass_dir = "application/scss"
images_dir = "public/images"
javascripts_dir = "public/js"
http_images_path = "/images"
http_generated_images_path = "/images"