如何更正我的指南针精灵表路径？答案

【问题标题】：How can I correct my compass spritesheet path?如何更正我的指南针精灵表路径？
【发布时间】：2014-06-15 21:49:32
【问题描述】：

我快疯了，想弄清楚这一点。我在 Wordpress 项目中使用 compass，并且我将 compass configure.rb 文件保存在我的 Wordpress 主题根目录中。这是我的 configure.rb 文件：

add_import_path "bower_components/foundation/scss"


http_path = ""
http_images_dir = "images"

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

output_style = :expanded
environment = :development

line_comments = false
color_output = false

目录结构如下：

theme_folder
|
|-css
|-images
|-js
|-scss

configure.rb 文件位于作为项目根目录的主题文件夹中。当我用指南针编译以下 scss 时：

@import "compass/utilities/sprites";
@import "../images/*.png";
@include all-images-sprites;

@import "compass/utilities/sprites";

@import "../images/*.png";
@include all-images-sprites;

#site-title h1 a {

    @extend .images-logo;

    display: block;
    width: 250px;
    height: 0;
    overflow: hidden;
    padding-top: 73px;
}

我得到以下 css：

.images-sprite, .images-logo, #site-title h1 a {
  background: url('../images/../images-s4b3b787fa3.png') no-repeat;
}

如您所见，图片网址真的很乱。知道为什么会这样吗？谢谢！

【问题讨论】：

标签： ruby wordpress sass compass-sass

【解决方案1】：

第一句话：由于您使用的是relative_assets，因此http_path 和http_images_dir 选项因为被Compass 忽略而无用。

@import 指令根据用于 Scss 文件的属性 project_path 和用于图像的属性 images_path 加载文件。
要知道属性images_path 的值，您可以在终端中键入以下命令：

compass config -p images_path

您可以注意到images_path 的价值为"project_path" + "/" + images_dir。因此，要导入您的 spritesheet，您不必指定图像目录的位置。
但是，基本上，您不能将images_dir 的所有图像导入精灵表中。您必须在位于images_dir 目录（即images/icons）的子目录中重新组合spritesheet 的图像。

完成后，只需使用指令 @import "icons/*.png"; 导入您的 spritesheet。

另一种方式

如果你想创建一个包含整个images_dir 目录内容的精灵表，你必须精确generated_images_dir 选项以指向images_dir 的不同位置（以避免无限循环）：

css_dir = "css"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "js"
generated_images_dir = "."
relative_assets = true

【讨论】：