compass自动生成雪碧图_html/css_WEB-ITnose

为了减少网页中的请求数，我们通常会将很多icon拼接到一个大的图片中，通过background和background-position来控制元素的显示。但是，拼接雪碧图以及后续的具体元素在雪碧图中位置的确定都是很麻烦的，精确也不准确。今天，就来介绍一种简便的方法。使用此方法，当拼接工作量大时，能够很大程度地减少前端的工作；而且不会出现像素上的差别，十分准确。

1.环境配置

• ruby
• sass

  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

• compass

  sudo gem install compass

• 查看上面的ruby,sass,compass是否安装正确，如果正确，就能看到对应的版本状态

  ruby -vsass -vcompass -v

2.compass项目

• 在自己新建的项目中

  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.

• 也可以直接在一个目录下，compass create compass-test

• 查看compass项目配置文件config.rb

  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

• 准备要拼接的icon

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

• 现在假设我们有一个share模块，然后share模块有2张需要合并的背景图

  pic1.png

• 针对share模块，我们在sass文件夹下新建一个叫share.scss，内容为：

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

• 在根目录下，执行

  compass compile

  如果命令执行成功，我们可以在images文件夹下生成一个以share开头的文件，比如我这的是：share-s0876535d58.png。

pic2.png

同时，我们在stylesheets文件夹下，看到新生成的share.css文件,内容如下：

/* line 56, share/*.png */.share-sprite, .share-github, .share-weibo {  background-image: url('/images/share-s0876535d58.png');  background-repeat: no-repeat;}/* line 84, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */.share-github {  background-position: 0 0;}/* line 84, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */.share-weibo {  background-position: 0 -23px;}

到此为止，基础的compass生成雪碧图的操作就完成了。使用此方法，当拼接工作量大时，能够很大程度地减少前端的工作；而且不会出现像素上的差别，十分准确。