關於部落格
繪圖 | 食記 | Web前端技術 | HTML | CSS | JavaScript 研究
  • 356393

    累積人氣

  • 24

    今日人氣

    3

    追蹤人氣

Sass with Compass sprites function 實作

如何使用 How  to use it

sass compass 擁有許多內建的 mixins,初學者大部分會用到的像是 CSS3, Helpers, reset 這幾個很實用的,再來有一個 mixin 叫 utilities,而 sprites 是在 utilities 底下

首頁打開你的 .scss 檔案,然後引入必要的 compass mixins

@import "compass/utilities/sprites";

如果你還想用 compass utilities 裡的其他 mixins, 可以直接整個引入

@import "compass/utilities";

接著,再多寫二行 sass code,sass 檔案經 compile 之後,全自動化 css sprites image 和 css code 就會自動被做出來惹!

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

不過接下來可能會有人卡住了,這也要怪 Compass 官方文件寫得不清不楚。上述二行 code 代表的意義是什麼?每個人的開發環境不一樣,變數在哪邊?要怎麼改?(我一開始也摸索了好一陣子……)

請注意看到第一行的 icons ,沒有錯,它就是代表你想要製成 sprites image 裡放圖檔的材料資料匣,你必須在你自己的 sass 結構的 images 中另外再建一個子資料匣叫 icons,然後把所有你想要加進去 sprites 的單一 ".PNG" 圖檔,給丟進去,然後再去 compile,sprites 才可能會被生出來。

其次,第二行 @include all-icons-sprites; 這句更要注意,官方文件根本沒特別提到中間那個 word 就是變數。在此範例,因為我建的 folder 名稱是 /icons/ 所以我的 sass code 才寫成如上述那樣。假如我今天的 folder name 命名為 /supercool/,那我的這二行 sass code 就要改寫成這樣:

@import "supercool/*.png";
@include all-supercool-sprites; //中間字即是 folder name 也是變數
相簿設定
標籤設定
相簿狀態