Question

我使用指南针生成精灵表，它会神奇地拉出来。我的问题是，当我尝试通过div {@include folder-sprite(js);}包含单个png时，它包含整个精灵表，我该如何解决此问题？非常感谢任何帮助，谢谢：）

当前有错误的实施：

    sass
    $icons-layout: horizontal;
    @import "icons/*.png";
    div {@include icons-sprite(js);}

    css
    .icons-sprite, div {
     background-image: url('../images/generated/icons-s119197eae9.png');
     background-repeat: no-repeat; }

css应加载精灵表并自动使用background-position，但它不会

编辑：指南针config.rb

##
## This file is only needed for Compass/Sass integration. If you are not using
## Compass, you may safely ignore or delete this file.
##
## If you'd like to learn more about Sass and Compass, see the sass/README.txt
## file for more information.
##

# Default to development if environment is not set.
saved = environment
if (environment.nil?)
  environment = :development
else
  environment = saved
end

# Location of the theme's resources.
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
generated_images_dir = images_dir + "/generated"
javascripts_dir = "js"

# Require any additional compass plugins installed on your system.
require 'compass-normalize'
require 'rgbapng'
require 'toolkit'
require 'breakpoint'
require 'singularitygs'
require 'susy'
require 'sass-globbing'

##
## You probably don't need to edit anything below this.
##

# You can select your preferred output style here (:expanded, :nested, :compact
# or :compressed).
output_style = (environment == :production) ? :expanded : :nested

# To enable relative paths to assets via compass helper functions. Since Drupal
# themes can be installed in multiple locations, we don't need to worry about
# the absolute path to the theme from the server omega.
relative_assets = true

# Output source maps in development mode.
sass_options = (environment == :production) ? {} : {:sourcemap => true}

Answer 1

在阅读指南针网站x12 /在线教程/观看精灵视频之后，我发现了我的错误，不幸的是它很简单，我希望我早些发现它，我的理由我＆＃39 ; m仍然是noobful :)解决方案：HTML必须将精灵名称/精灵文件夹作为一个类，因为罗盘输出到该特定类。至于为什么打印所有图像，仅仅是因为我没有在指定的类上设置宽度/高度，而是输出了整个spritesheet。慢慢拼凑这些，生活和学习，感谢时间：）

指南针mixin - 文件夹精灵（imagename） - 打印不应该的所有图像

1 个答案: