带有 Webroot 文件夹的指南针精灵表路径

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 文件中，我使用以下内容来扫描我的精灵：

$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;
}

问题是我的精灵路径出来了ala public/images/sprites-s500a0fe4b1.png，而他们不应该有公共/。

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

我设置了http_path = "public" 并得到了double 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

相关资产

如果你想在图片和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 文件路径位置的图像访问权限。

绝对资产

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

所以，当webroot为public时，要访问存储在public/images中的图像，你必须工作两次：

1. 您必须告诉 Compass 图像存储在本地 public/images 目录中：images_dir = "public/images"。
2. 必须配置完整的 http 路径：http_images_path = "/images" 用于常规图像（当您使用帮助程序 image-url() 时），http_generated_images_path = "/images" 用于生成的精灵。

最终的配置文件变成：

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"