【Sass中級】使用Sass和Compass製做雪碧圖

時間 2019-11-16

標籤 Sass中級使用 sass compass 製做雪碧简体版

原文原文鏈接

「Image Spriting」的工做原理是一堆的圖像（稱爲「sprites」,精靈）合併成一張大的圖像（國內稱爲雪碧圖），以達到減小HTTP的請求數。而後經過background-position巧妙的顯示雪碧圖中須要呈現的圖像。php

下圖是一個工具欄的雪碧圖：css

鑑於上面的圖片，咱們能夠爲媒體圖標這樣寫樣式：html

$icon-width: 24px; $icon-height: 24px; $icons: image-url('toolbar.png'); .media-icon { background-image: $icons; background-position: -($icon-width * 5) -($icon-width * 1); width: $icon-width; height: $icon-height; }

這樣作是媒體圖像是背景圖中X軸方向的第五個以後，Y軸第一個圖像以後：python

雪碧圖是出名的難維護。添加一個新的圖像須要更新圖像與相關的CSS。更糟糕的是若是你要刪除一個圖像時，會變得更爲複雜。你會怎麼作呢？從新作過一張雪碧圖？web

Compass來拯救你

幸運的是，Chris Eppstein的Compass項目包括了一套強大的工具，用於自動建立和維護雪碧圖。Compass能夠建立雪碧圖，給出每一個圖的精確座標，還可讓你控制圖的佈局下間距，並在SCSS中寫入須要的圖像。總之，Compass中製做雪碧圖的工具，將節省你大量的時間與精力。sql

我並不想從頭開始介紹Compass，由於這是項目浩大的工程，何況官網已經有不少教程。若是你並不熟悉Compass，我建議你先閱讀這些教程先。緩存

目錄結構

根據Compass製做雪碧圖的基本原理，你把圖像放在一個文件夾中，並且這個文件夾放在images/的目錄下，Compass會根據您提供的源圖片生成一張雪碧圖。對於咱們工具欄的例子，我將圖片源都放在了images/toolbar目錄下，就像下面這樣：sass

images/
|
`-- toolbar/ |-- bold.png |-- italic.png |-- link.png |-- code.png |-- unordered-list.png |-- ordered-list.png ...

請記住，你應該只把須要的圖片源放到這個文件夾內。Compass會利用這些圖片源合併出你最圖須要的雪碧圖。ruby

爲了能更好的經過示例演示Compass和Sass實現雪碧圖，將原文中的示例換成下圖所示：（爲了避免去找圖片源，我使用了我電腦中的一些圖片以示說明）bash

最簡單的方法

製做雪碧圖最簡單的方法就是使用Compass的@import命令：

@import "images/toolbar/*.png";

若是你的Sass更新到了最新版本(Sass 3.3.7 (Maptastic Maple))，那麼運行上面的命令將沒法實現，在命令終端會報錯誤信息。這個時候你只須要在命令終端運行：gem install compass --pre。使用compass -v命令查看你的版本號是否是：Compass 1.0.0.alpha.19。若是無誤，咱們能夠繼續往下。

下面內容是譯者實戰中的經驗：

爲了能更好的實戰Compass和Sass製做雪碧圖，將原文中的結構換成了上圖的效果，從圖中能夠看出，咱們全部*.png放在一個名叫「Color」的文件目錄之下，並且這個文件夾是放置在「images/」之下。若是按照原文教程所言，在.scss文件中直接經過@import命令引用：

@import "images/toolbar/*.png";

根據示例所示，咱們只須要把toolbar換成咱們的Color:

@import "images/Color/*.png";

開啓compass watch命令，終端會提示：

>>> Compass is watching for changes. Press Ctrl-C to Stop. info sass/screen.scss was modified overwrite stylesheets/ie.css overwrite stylesheets/print.css error sass/screen.scss (Line 8: No files were found in the load path matching "images/Color/*.png". Your current load paths are: /Applications/XAMPP/xamppfiles/htdocs/Sites/sass-test/images) overwrite stylesheets/screen.css

文件路徑錯誤，按照咱們寫CSS的經驗，我將路徑作相應的調整：

@import "../images/Color/*.png";

命令檢測到：

info sass/screen.scss was modified 
identical stylesheets/ie.css 
identical stylesheets/print.css 
   remove images/Color-s36a4fadee6.png
   create images/Color-s1760dc49ac.png overwrite stylesheets/screen.css

雖然不報錯，但看編譯出來的.css文件，不難發現路徑存在問題：

.Color-sprite { background-image: url('/images/../images/Color-s1760dc49ac.png'); background-repeat: no-repeat; }

說實在的，這讓我困惑。後來，我在想，是否是Compass已具有此功能，咱們只須要將路徑改爲包含圖片的文件夾開始，因而我嘗試這樣寫：

@import "Color/*.png";

命令終端也不路徑錯誤，並且編譯出來的CSS也是我想要的：

.Color-sprite { background-image: url('/images/Color-s36a4fadee6.png'); background-repeat: no-repeat; }

此時在你的項目的"images/"能夠看到一張名爲「Color-s36a4fadee6.png」的圖，以下所示：

你們可能會感到很是神奇，想知道爲何？那麼咱們接下來回到原文。

在Compass看到@import指令的參數爲*.png時，它會假定將這個目錄下的全部.png圖片製做成一張雪碧圖。讓他生成一個mixin，使您在項目中更好的使用雪碧圖。

其中mixin能夠爲雪碧圖的全部圖像生成對應的類。對於mixin的名稱是基於引入圖的文件夾名。例如咱們的示例：

@include all-toolbar-sprites;

編譯出來的CSS：

.toolbar-sprite, .toolbar-bold, .toolbar-italic, .toolbar-link { background-image: url('../images/toolbar-s1f1c6cbfd0.png'); background-repeat: no-repeat; } .toolbar-bold { background-position: 0 0; } .toolbar-italic { background-position: 0 -24px; } .toolbar-link { background-position: 0 -48px; }

請注意，Compass爲咱們自動建立了一張「toolbar-s1f1c6cbfd0.png」圖片。這就是咱們的雪碧圖。這命名咱們放圖像的文件夾(在這個例子中叫toolbar)加上一串字母和數字。每當你更新圖片源時，緩存的CSS就知道，而且會更新雪碧圖。

咱們再次回到我實戰的用例中來（是否是感受蠻亂的，有點神遊）。按照原文的教程所言，我在實際用例中是這樣作的：

在.scss文件經過@include調用Compass生成的mixin：

@include all-Color-sprites;

輸出的CSS代碼：

.Color-sprite, .Color-Behance, .Color-Deviantart, .Color-Dribbble, .Color-Facebook, .Color-Forrst, .Color-Github, .Color-LastFM, .Color-LinkedIn, .Color-Picasa, .Color-RSS, .Color-Skype, .Color-Tumblr, .Color-Twitter, .Color-Youtube { background-image: url('/images/Color-s36a4fadee6.png'); background-repeat: no-repeat; } .Color-Behance { background-position: 0 0; } .Color-Deviantart { background-position: 0 -52px; } .Color-Dribbble { background-position: 0 -104px; } .Color-Facebook { background-position: 0 -156px; } .Color-Forrst { background-position: 0 -208px; } .Color-Github { background-position: 0 -260px; } .Color-LastFM { background-position: 0 -312px; } .Color-LinkedIn { background-position: 0 -364px; } .Color-Picasa { background-position: 0 -416px; } .Color-RSS { background-position: 0 -468px; } .Color-Skype { background-position: 0 -520px; } .Color-Tumblr { background-position: 0 -572px; } .Color-Twitter { background-position: 0 -624px; } .Color-Youtube { background-position: 0 -676px; }

控制類名

若是你想更好的控制輸出，不使用混合宏all-{文件夾名稱}-sprites。在Compass你也可使用單獨的單獨的混合宏。

@import "images/toolbar/*.png"; .bold-icon { @include toolbar-sprite(bold); } .italic-icon { @include toolbar-sprite(italic); } .link-icon { @include toolbar-sprite(link); }

這些混合宏一樣是根據雪碧圖的名稱命名的。在咱們的示例中「toolbar-sprite」。

在不少時候，咱們但願調用的圖片是根據須要調用雪碧圖上的圖像。Compass很是的強大，除了能夠經過混合宏all-{文件夾名稱}-sprites一次生成全部圖像的CSS（類名是Color-圖像源文件名）以外，還能夠經過混合宏{文件夾名稱}-sprites({圖像源文件名})來實現按需加載，而且自定義類名。咱們來看個簡單的示例：

@import "Color/*.png"; .icon-twitter { @include Color-sprite(Twitter); } .icon-facebook{ @include Color-sprite(Facebook); } .icon-youtube{ @include Color-sprite(Youtube); }

輸出的CSS:

.Color-sprite, .icon-twitter, .icon-facebook, .icon-youtube { background-image: url('/images/Color-s36a4fadee6.png'); background-repeat: no-repeat; } .icon-twitter { background-position: 0 -624px; } .icon-facebook { background-position: 0 -156px; } .icon-youtube { background-position: 0 -676px; }

雪碧地圖（Sprite maps）

若是你真的須要一個更低級的，Compass一樣能夠知足你，他提供了另外一種工具——雪碧地圖(Sprite maps)。讓你在內部控制你的雪碧圖。

使用雪碧地圖，咱們就再也不使用@import指令了，是這樣使用的：

$icons: sprite-map("toolbar/*.png"); .bold-icon { background: sprite($icons, bold); } .italic-icon { background: sprite($icons, italic); } .link-icon { background: sprite($icons, link); }

請注意，沒有使用生成的雪碧圖的混合宏，而是使用生成的雪碧地圖的混合宏sprite，在對應的類名上插入圖像。

一樣，咱們本身動手實戰一下雪碧地圖的功能。根據示例，咱們也作必定調整：

$icons: sprite-map("Color/*.png"); .icon-twitter { background: sprite($icons,Twitter); } .icon-facebook{ background: sprite($icons,Facebook); } .icon-youtube{ background: sprite($icons,Youtube); }

生成的CSS以下：

.icon-twitter { background: url('/images/Color-s29211bcaaa.png') 0 -624px; } .icon-facebook { background: url('/images/Color-s29211bcaaa.png') 0 -156px; } .icon-youtube { background: url('/images/Color-s29211bcaaa.png') 0 -676px; }

控制間距

不少時候，咱們製做雪碧圖時，每一個圖像之間須要有必定的空白距離。在實際應用中，這一點也是很是重要的。

好比在每一個icon四周設置一個間距：

// 使用@import $toolbar-spacing: 5px; @import "toolbar/*.png"; // 使用Sprite Maps $icons: sprite-map("toolbar/*.png", $spacing: 5px);

在咱們實際用例中，咱們每一個icon的大小是52px*52px。爲了更好的適應偶數計算，我但願每一個icon之間有一個8px的間距。根據上面介紹，咱們能夠這樣作。

先來看@import的方式：

$Color-spacing: 8px; @import "Color/*.png"; .icon-twitter { @include Color-sprite(Twitter); } .icon-facebook{ @include Color-sprite(Facebook); } .icon-youtube{ @include Color-sprite(Youtube); }

這個時候Compass會從新生成一張雪碧圖，咱們將有無間距的兩張雪碧圖來對比一下：

特別注意，使用@import指令，咱們定義變量時須要以{文件夾名稱}-spacing:間距值；格式來定義，若是你的變量名和放置圖片源的文件夾名稱不匹配，將沒法生成帶有間距的雪碧圖。

接下來看第二種，就是雪碧地圖的方式：

$icons: sprite-map("Color/*.png",$spacing:8px);

這種方式與第一種方式生成的雪碧圖是同樣的。

控制佈局

Compass支持幾種不一樣的佈局方式，就是雪碧圖中icon的排列方式：

包括四種排列方式：vertical、horizontal、diagonal和smart。其中vertical爲其默認的排列方式。

在不一樣的生成雪碧圖方式中，其使用方式也略有不一樣。也就是@import和雪碧地圖，設置方式不一樣：

// 使用@import $toolbar-spacing: 5px; $toolbar-layout: 'smart'; @import "toolbar/*.png"; // 使用雪碧地圖Sprite Maps $icons: sprite-map("toolbar/*.png", $spacing: 5px, $layout: diagonal);

注意：在當前版本，你不能同時使用間距和智能(smart)佈局。

咱們接下來親自實戰一下這四種排列圖標的效果。

垂直排列

使用Compass生成雪碧圖，其圖像中的icon排列方式是按垂直方式排列，這種排列方式也是其默認的排列方式，不須要顯式的聲明。固然，你顯示的聲明也是能夠的。如：

$Color-spacing: 8px; $Color-layout: "vertical"; @import "Color/*.png";

生成的雪碧圖以下：

水平排列

按照上面的方式，將$Color-layout變量的值設置爲「horizontal」。

$Color-spacing: 8px; $Color-layout: "horizontal"; @import "Color/*.png";

生成的雪碧圖以下所示：

斜角排列（成45度角）

一樣的將$Color-layout變量的值設置爲「diagonal」。

$Color-spacing: 8px; $Color-layout: "diagonal"; @import "Color/*.png";

生成的雪碧圖以下所示：

智能排列

將$Color-layout值設置爲"smart"：

$Color-spacing: 8px; $Color-layout: "smart"; @import "Color/*.png";

能夠生成的雪碧圖與默認垂直的效果是同樣的。我在想是否是哪操做失誤。前面有說過間距和智能排列不能同時出現，雖然個人Compass是pre版本，我仍是嘗試禁用了間距的設置。可仍是依舊。效果跟前面示意徹底不一樣。我在想是否是由於icon大小都同樣，我不仿修改一下，加過一張不一樣類型的圖片到源文件夾中。

這個時候，從新看看生成出來的雪碧圖效果：

效果出來了。

特別提醒：使用Compass設置圖標排列方式時，定義變量的方式和定義間距變量方式相似，須要和對應的源圖的文件夾結合起來。好比咱們此處全部圖片源都放在Color的文件夾中，那麼定義的變量名是：Color-layout。也就是${文件夾名稱}-layout:[vertical][horizontal][diagonal][smart]。

上面演示的是經過@import指令生成雪碧圖的排列方式，那麼在雪碧地圖中使用方法相似，你只須要修改參數$layout的值便可。

$icons: sprite-map("Color/*.png",$spacing:8px,$layout:smart);

其它函數和混合宏功能

Compass還爲雪碧地圖提供了一些其餘的函數(function)和混合宏（mixin）功能：

sprite-url($icons)：返回雪碧圖的URL
sprite-position($icons,bold)：返回「bold」圖標在雪碧圖中的X軸和Y軸的座標值
@include sprite-dimensions($icons,link)：根據雪碧圖的原始尺寸設置like圖標的寬度和高度。

使用方法以下：

$icons: sprite-map("toolbar/*.png", $spacing: 5px, $layout: diagonal); .bold-icon { background-image: sprite-url($icons); background-position: sprite-position($icons, bold); @include sprite-dimensions($icons, bold); }

根據上面所述，親自體會了一回：

$icons: sprite-map("Color/*.png",$spacing:8px,$layout:smart); .icon-twitter { background-image: sprite-url($icons); background-position: sprite-position($icons,Twitter); //@include sprite-dimensions($icons,Twitter); } .icon-facebook{ background-image: sprite-url($icons); background-position: sprite-position($icons,Facebook); //@include sprite-dimensions($icons,Facebook); } .icon-youtube{ background-image: sprite-url($icons); background-position: sprite-position($icons,Youtube); //@include sprite-dimensions($icons,Youtube); } .icon-ctrip{ background-image: sprite-url($icons); background-position: sprite-position($icons,Ctrip); //@include sprite-dimensions($icons,Ctrip); }

你們都看到了，我把@include sprite-dimensions()功能給註釋掉了，由於在個人環境中沒有編譯成功。目前我也尚未查出切確緣由。但願有知道緣由的同窗但願能分享一下。最後編譯出來的CSS：

.icon-twitter { background-image: url('/images/Color-s6ea6182c52.png'); background-position: -156px 0; } .icon-facebook { background-image: url('/images/Color-s6ea6182c52.png'); background-position: 0 0; } .icon-youtube { background-image: url('/images/Color-s6ea6182c52.png'); background-position: 0 -52px; } .icon-ctrip { background-image: url('/images/Color-s6ea6182c52.png'); background-position: 0 -208px; }