compass自动生成雪碧图_html/css

gem install sass

gem 在国内的镜像不能用Could not find a valid gem 'sass' (>= 0), here is why: Unable to download data from https://rubygems.org/ - Errno::E...

gem sources --remove https://rubygems.org/gem sources -a https://ruby.taobao.org/gem sources -l*** CURRENT SOURCES ***https://ruby.taobao.org按照步骤进行就行，之后再进行如下命令：sudo gem install sass

sudo gem install compass

ruby -vsass -vcompass -v

compass init

directory sass/ directory stylesheets/ create config.rb create sass/screen.scss create sass/print.scss create sass/ie.scss write stylesheets/ie.css write stylesheets/print.css write stylesheets/screen.cssCongratulations! Your compass project has been created.

require 'compass/import-once/activate'# Require any additional compass plugins here.# Set this to the root of your project when deployed:http_path = "/"css_dir = "stylesheets"sass_dir = "sass"images_dir = "images"javascripts_dir = "javascripts"# You can select your preferred output style here (can be overridden via the command line):# output_style = :expanded or :nested or :compact or :compressed# To enable relative paths to assets via compass helper functions. Uncomment:# relative_assets = true // 使用相对目录# To disable debugging comments that display the original location of your selectors. Uncomment:# line_comments = false //关闭行注释# If you prefer the indented syntax, you might want to regenerate this# project again passing --syntax sass, or you can uncomment this:# preferred_syntax = :sass# and then run:# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

根据config.rb中的设置，我们需要将图片放在images文件夹下所以，我们先在项目根目录下新建一个images文件夹，比如我们现在项目?多个模块，每个模块需要对应一个雪碧图，那么我们在images中新建多个文件夹保存原始的图片；

@import "compass/utilities/sprites"; // 加载compass sprites模块@import "share/*.png"; // 导入share目录下所有png图片@include all-share-sprites; // 

compass compile