指南针spriting

sef*_*rov 5 css sass compass-sass

根据我写的文件,为了通过指南针实现精神化:

// web/sass/icons.scss
@import "../images/icons/*.jpg"; // for any cases also tried .png 
@include all-icons-sprites;
Run Code Online (Sandbox Code Playgroud)

并得到错误:

error sass/icons.scss (Line 2: File to import not found or unreadable: ../images/icons/*.jpg.
Run Code Online (Sandbox Code Playgroud)

我不认为路径是错误的,因为也尝试了完整的路径.

结构是这样的:

+ web
  - sass
     + icons.scss
     + ...
  - images
     + icons
       - icon1.jpg
       - icon2.jpg
       - ...
Run Code Online (Sandbox Code Playgroud)

Ale*_*olo 7

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

所以如果你有这个结构:

+ web
  + sass
    - icons.scss
  + images
    + icons
      - icon1.png
  + config.rb
Run Code Online (Sandbox Code Playgroud)

在你的config.rb,你应该有一些与此类似:

...
images_dir = "images"
sass_dir = "sass"
...
Run Code Online (Sandbox Code Playgroud)

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

// web/sass/icons.scss
@import "icons/*.png"; // for any cases also tried .png 
@include all-icons-sprites;
Run Code Online (Sandbox Code Playgroud)

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

一定要了解配置文件,因为它可能很棘手http://compass-style.org/help/tutorials/configuration-reference/

  • 我没有先查看您尝试导入的图标,但Compass仅为精灵支持PNG.它不是在教程中编写的,但是在助手部分你可以找到:http://compass-style.org/reference/compass/helpers/sprites/ (5认同)