Question

我是Compass的新手，我对sprite生成器很感兴趣。我觉得它运作正常。我按照教程，我的精灵有一些问题。我将文件插入名为spr的文件夹中。我已经在screen.scss文件中插入了以下代码：

@import "spr/*.png";

为我的标题插入以下内容：

h1{
        @include spr-sprite(Flickr);
        height: 91px;
    }

我检查了检查员，网址是正确的，也是背景位置。问题是，在检查器元素中检查后，它无法打开图像URL。生成的图片确实在finder中有效，但是因为文件不存在。名称和位置都很完美。

如果他们遇到同样的问题，特别是如何解决问题，有人能告诉我吗？

编辑：生成CSS

.spr-sprite, header h1 {
    background: url('/images/spr-sbd3b4dd92d.png') no-repeat;
}
header h1 {
    background-position: 0 -120px; height: 91px;
}

Answer 1

不熟悉Scout，但是......

现在Sass正在使用 root relative 路径（前导斜杠）。为了让那些人解决：

您必须使用某种本地服务器并加载页面通过http（浏览器网址栏中的http://...）
网站必须位于网络文件夹的根目录（不在子文件夹中）

例如：

├── css
│   └── site.css
├── images
│   └── spr-sbd3b4dd92d.png
├── index.html
└── sub-folder
    └── index.html

如果您希望将站点root置于子文件夹中，或者能够使用file://协议在浏览器中加载页面，则应在config.rb中启用相对路径：

relative_assets = true

如果您的#中已经取消注释（ viz：没有前导config.rb），则Scout一定不会关注配置文件。

看起来可能是a bug in Scout。

SASS精灵网址工作但图像未显示

1 个答案: