我正在使用 compass 生成一个 sprite-sheet,它神奇地完成了。我的问题是,当我尝试通过 div {@include folder-sprite(js);}
包含单个 png 时,它包含整个 sprite-sheet,我该如何解决这个问题?非常感谢任何帮助,谢谢 :)
当前的错误实现:
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 应该加载 sprite-sheet 并自动利用 background-position
,但它没有
编辑:compass 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}
最佳答案
HTML 必须将 sprite 名称/sprite 文件夹作为一个类,作为该特定类的 compass 输出。至于为什么所有的图片都打印出来,只是因为我没有在指定的类上设置宽度/高度,并且输出了整个spritesheet。
关于css - Compass mixin - folder-sprite(imagename) - 在不应该的时候打印所有图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26639240/