玩轉 Compass Sprite

時間 2019-11-16

標籤 compass sprite 简体版

原文原文鏈接

1、什麼是 Sprite？

Sprite（精靈），在國內也叫雪碧（音譯），是一種 CSS 圖像合併技術，該方法是將圖標和背景圖像合併到一張圖片上，而後利用 CSS 的背景定位來顯示須要顯示的圖片部分。javascript

優勢

減小加載網頁圖片時對服務器的請求次數css
提升頁面的加載速度html
減小鼠標滑過的一些bug（IE6）java

不足

佔據內存（大量的無用空白）瀏覽器
影響瀏覽器的縮放功能（能夠給圖片必定空間解決）sass
拼圖維護比較麻煩服務器
使 CSS 的編寫變得困難佈局
Sprite 調用的圖片不能被打印（能夠在@media添加print聲明）測試

思考

Sprite 的最大做用其實也就是提升頁面加載速度，在 HTTP/2 還未普及的狀況下，仍是須要掌握一下 Sprite 的使用。這時候使用 Compass 的 Sprite 功能或許能助你一臂之力。優化

拓展閱讀

2、Compass 的方案

Compass 生成 CSS 精靈的過程以下：

讓 Compass 指向一個精靈的文件夾；
告訴 Compass 撰寫你的精靈；
編譯你的樣式表

經過兩行 Sass，你就能夠告訴 Compass 根據一個目錄下的每張圖片生成精靈，測量它們的尺寸，經過每一個圖片的文件名撰寫出不一樣類名下的背景位置。當你改變圖片時，Compass 會自動更新你的樣式表，生成一個新的精靈並在必要的狀況下更新背景位置。

3、具體操做

1. 前期準備

先進入一個目錄，用 Compass 初始化：

> E:
> dir /b
> cd temp
> compass create myproject

打開目錄下的 config.rb，調整一下：
- 修改資源子目錄名稱（按需）
- 使用相對路徑（建議）
- 去掉生成的每行註釋（按需）

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"    
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"

# To enable relative paths to assets via compass helper functions.
relative_assets = true

# To disable debugging comments that display the original location of your selectors.
line_comments = false

從新編譯一下（調整了文件夾，並添加了sass/style.scss文件、images/icons文件夾）：

> cd myproject
> compass compile

2. 編寫 Sass

打開 sass/style.scss進行編寫（需本身建立），保存就會即時生成 Sprite！

@import 'icons/*.png';
@include all-icons-sprites;

打開 css/style.css 能夠看到相關的 Sprite 類已經生成：

4、個性化設置

爲了更好的使用 Sprite，你可能還須要作一些個性化設置。

1. 使用

修改 sass/style.scss：

// 爲每一個圖標設置寬高
$icons-sprite-dimensions: true;

@import 'icons/*.png';

@include all-icons-sprites;

// 設置圖標佈局類型
.icons {
    display:inline-block;
}

編寫 myproject/test.html 測試：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <span class="icons icons-warn-info"></span>
</body>
</html>

圖標顯示成功：

2. 更多

// 爲全部圖標設置間距[1]
$icons-spacing: 10px;

// 設置精靈佈局[2]
$icon-layout: smart;

// 爲全部圖標設置寬高[3]
$icons-sprite-dimensions: true;

// 導入 Compass Sprites 模塊[4]
@import 'compass/utilities/sprites';

// 導入須要生成精靈的圖片[5]
@import 'icons/*.png';

// 生成 Sprite 須要用到的 CSS 規則[6]
@include all-icons-sprites;

// 設置圖標通用佈局類型[7]
.icons {
    display:inline-block;
}

格式說明：