使用compass生成雪碧圖sprite

有了sass和compass，前端真的是省了好多事，不少均可以交給compass進行自動化，好比說生成雪碧圖等。如今，講解一下如何使用compass生成雪碧圖。demo地址

環境

• ruby

• sass(依賴sass)

• compass

雪碧圖生成 & 使用

項目初始化

$ compass init

生成目錄結構以下所示:

• config.rb（compass配置文件）

• sass

• stylesheets

compass生成sprite

• 在項目根目錄下新建images目錄

• 在新建的images目錄下新建share目錄用於存儲png圖片

• 在上一步新建的share目錄下存儲png圖片(若是沒有png圖片能夠參考最下面的附件圖片)

sass代碼

// scss/sprite.scss
@import "compass/utilities/sprites";    // 加載compass sprites模塊
@import "share/*.png";                    // 導入share目錄下全部png圖片
@include all-share-sprites;                // 輸出全部的雪碧圖css

# 在項目根目錄下
$ compass watch sass/sprite.scss
# 運行以上命令，在目錄images下生成雪碧圖，以下圖所示

使用雪碧圖

html結構

<ul>
  <li class="menu-item app"></li>
  <li class="menu-item extend"></li>
  <li class="menu-item focus"></li>
</ul>

css結構

ul {
  padding: 0;
  background: #f00;
}
ul li {
  list-style: none;
  display: inline-block;
  width: 22px;
  height: 22px;
}
.menu-item {
    background: url(http://7fvgk8.com1.z0.glb.clouddn.com/sprite.png) no-repeat;
    background-size: 22px auto;
}
.app {
    background-position: 0 0;
}
.extend {
    background-position: 0 -22px;
}
.focus {
    background-position: 0 -44px;
}

附件