指南针精灵答案

【问题标题】：Compass spriting指南针精灵
【发布时间】：2012-06-11 06:20:12
【问题描述】：

为了根据the documentation实现罗盘精灵，我写了这个：

// web/sass/icons.scss
@import "../images/icons/*.jpg"; // for any cases also tried .png 
@include all-icons-sprites;

并得到错误：

error sass/icons.scss (Line 2: File to import not found or unreadable: ../images/icons/*.jpg.

我认为路径没有错，因为也尝试了完整路径。

结构是这样的：

+ web
  - sass
     + icons.scss
     + ...
  - images
     + icons
       - icon1.jpg
       - icon2.jpg
       - ...

【问题讨论】：

【解决方案1】：

这个线程是安静的老但很酷的指南针解决方案在这里 on github

【讨论】：

【解决方案2】：

精灵指南针使用config.rb 中定义的路径。

如果你有这样的结构：

+ web
  + sass
    - icons.scss
  + images
    + icons
      - icon1.png
  + config.rb

在您的config.rb 中，您应该有类似这样的内容：

...
images_dir = "images"
sass_dir = "sass"
...

然后在你的 icons.scss 中你应该这样做：

// web/sass/icons.scss
@import "icons/*.png"; // for any cases also tried .png 
@include all-icons-sprites;

因为导入是相对于我们上面定义的images 目录的。

【讨论】：

谢谢。听起来很合理。但是，它也不起作用：File to import not found or unreadable: icons/*.jpg。有趣的是，对于背景图像，例如，在 scss 文件中，我使用'background: url(../images/somepic.png)' 并且它可以工作
我没有看你试图导入的图标，但 Compass 只支持 PNG 的精灵。教程中没有写，但是在helpers部分你可以找到：compass-style.org/reference/compass/helpers/sprites
也应该是@include all-icons-sprites :)
@AlessandroVendruscolo 我试过你的解决方案，但我有另一个问题：stackoverflow.com/questions/27809308/…