使用 Compass 創建一個項目
要在一個新項目中使用 Compass，可以打開命令行工具並輸入如下指令
compass create my-project
如果 my-project 目錄不存在，上述命令會創建一個叫做 my-project 的目錄，並在其中添加以下文件：
如果你沒有爲compass create命令傳遞一個目錄參數，它將使用你當前所在的目錄。
在config.rb文件中，你可以對Compass的一些配置進行修改，例如資源位置和壓縮程度。sass目錄包含了一些初始的樣式表，你可以對它們進行編輯、重命名，或者完全拋棄，但是這個文件夾是你存放Sass樣式表的地方。最後，stylesheets目錄用於存放編譯後的CSS文件。
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 sass images javascripts路徑 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): #根據個人偏好選擇輸出樣式 :nested嵌套 :compact緊密 :compressed壓縮 # 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
在設置項目時配置選項
使用compass create命令時，你可以使用一些選項來配置你的項目：
--bare （不包含默認樣式表進行安裝）；
--syntax sass （在默認樣式表中使用縮進語法）；
--sass-dir "cool" （使用'cool'目錄存放Sass文件）；
--css-dir "style" （使用'style'目錄存放CSS文件）；
--images-dir "img" （使用'img'目錄存放圖片）；
--fonts-dir "type" （使用'type'目錄存放字體文件）；
--javascripts-dir "js" （使用'js'目錄存放JavaScript文件）。
例如：
compass create my-project --bare --sass-dir "cool" --css-dir "style"
開始製作雪碧圖
首先獲取一些 icon 圖標，獲取一些免費圖標集 https://github.com/Keyamoon/IcoMoon-Free
文件夾目錄結構：（images目錄下有一個 icons 子目錄存放一些 .png圖片）
1、創建一個雪碧圖
打開 screen.scss 並加入如下代碼：
// 加載compass sprites模塊 @import "compass/utilities/sprites"; //告訴Compass根據images/icons/目錄下的所有PNG圖片生成一張雪碧圖 @import "icons/*.png";
命令行工具通過如下指令來執行編譯
compass watch
最終在 images 文件夾下生成了一個豎向排布的 icons-sac817bc43c.png
2、自定義雪碧圖
變量命名錶
$<map>-<property>: setting; $<map>-<sprite>-<property>: setting;
在上面的示例中，雪碧圖文件夾的名稱是 icons，所以改變間距的變量被命名爲 $icons-spacing。而爲了設置icons/attachment.png 間距變量， 你應該賦值給$icons-attachment-spacing。
記住， 這些變量必須在導入雪碧圖之前被定義， 否則不會生效。請找到configuring-automatic-sprites文件夾下精靈配置的示例代碼。
2-1、配置雪碧圖間距
Compass 允許你通過配置雪碧圖間距變量改變雪碧圖的間距
$<map>-spacing: 0px; $<map>-<sprite>-spacing: 0px;
默認值是0px，這意味着每個 圖標 被拼入雪碧圖時不帶任何間距。設置這個變量或單獨給 每個 圖標 賦值，會使得每個 圖標 在拼合時在周圍增加若干像素的透明間
修改screen.scss，例如：
// 加載compass sprites模塊 @import "compass/utilities/sprites"; // 配置所有sprite間距爲100px，默認爲0px 此句要放在前面才生效 $icons-spacing:100px; //配置所有sprite的位置，默認爲0px $icons-position:100px; //智能佈局的把每張圖像放在最合適的地方 //$icons-layout:smart; //水平排列 $icons-layout:horizontal; //縱向排列 //$icons-layout:vertical; //單獨爲arrow圖標設置12像素的透明間距。 $icons-arrow-spacing: 12px; //告訴Compass根據images/icons/目錄下的所有PNG圖片生成一張雪碧圖 @import "icons/*.png";
自動刪除了之前的圖片，並生成一個新的 icons-s1a799c6c79.png
2-2、配置圖標的重複性
在一些情況下，雪碧圖中水平方向的重複 圖標 會有大用處。爲此，你可以設置雪碧的重複性變量：
$<map>-repeat: no-repeat/repeat-x; $<map>-<sprite>-repeat: no-repeat/repeat-x;
如：箭頭圖標橫向平鋪整個圖，重複的箭頭圖標橫跨整個精 靈地圖和最寬的compass的logo對齊。
$icons-arrow-repeat: repeat-x;
2-3、配置圖標的位置
有時候，移動一個 圖標的位置是非常有幫助的，Compass允許你通過設置位置變量來橫向 移動圖片
$<map>-position: 0px; $<map>-<sprite>-position: 0px;
這個變量調整了雪碧圖中圖標的橫向位置。其默認值爲0px，意味着每個圖標都是左對齊 的。這個值可以是百分比，也可以是像素值。
$icons-position: 4px; $icons-clubs-position: 100%;
在這個例子裏，雪碧圖中的每個圖標都被右移了4個像素，並且梅花移動到了最 右邊
2-4、設置圖標的佈局
Compass有以下幾種圖標的佈局可供選擇：
$<map>-layout: vertical/horizontal/diagonal/smart;
默認的佈局是vertical，從整體上影響雪碧圖佈局，告知Compass如何排布所有的圖標。
大多數情況下，你可能需要將佈局設置爲smart，這種佈局會讓Compass產生最小的空白區域。
位置和重複性的設置只會應用到橫向或縱向佈局的雪碧圖中。對於採用智能佈局或對角線 佈局的雪碧圖，位置和重複性的設置是無效的
2-5、清除過期的雪碧圖
當添加、刪除或改變圖片後，會生成新的雪碧圖。Compass會自動爲你移除舊的雪碧圖， 或者你也可以把它們保留下來
$<map>-clean-up: true/false;
默認情況下，當生成新的雪碧圖時，Compass會自動把舊的移除。這會避免你的硬盤被不 再使用的文件填滿，同時也確保你不會困惑自己的樣式表到底在使用哪個文件。如果你喜歡手動 移除舊的雪碧圖，你也可以將其設置爲false
3、生成雪碧圖的CSS
Compass 有兩個很順手的混合器，可以自動生成雪碧圖的CSS
@include all-<map>-sprites; @include <map>-sprite($name);
這裏的<map>是一個佔位符，它會被替換爲包含雪碧圖標的文件夾的名稱，這裏是 icons，all-sprites 混合器會爲整個雪碧圖撰寫所有必要的CSS。
第二個混合器將會輸出一個獨立命名圖標的CSS，這兩個混合器都會隨着圖標的導入而創建，因此，它們只能在導入之後使用
3-1、all-sprites混合器
@import "compass/utilities/sprites"; @import "icons/*.png"; @include all-icons-sprites;
這個all-icons-sprites混合器將會爲雪碧圖中的每個圖標撰寫必要的CSS
.icons-sprite,
.icons-arrow,
.icons-attachment,
.icons-box-add, ... {
background: url('/images/icons-s0cad3f8f97.png') no-repeat;
}
.icons-arrow { background-position: 0 0; }
.icons-attachment { background-position: -16px -96px; }
.icons-box-add { background-position: 0 -64px; }現在讓我們看看這個混合器都生成了什麼：
(1) 它爲設置所有來自images/icons/的圖標樣式創建了一個基礎類icons-sprite；
(2) 它爲其圖標目錄下的每一個文件名創建了類；
(3) 它爲所有的圖標都增加了背景圖片；
(4) 它爲所有的圖標都增加了背景位置。
默認情況下，Compass不會設置這些元素的寬和高。Compass可以自動生成圖標的尺寸，但我們不一定總需要它
3-1、single-sprites混合器
這個圖標會針對單個的圖標輸出CSS
@import "compass/utilities/sprites";
@import "icons/*.png";
.add-button {
@include icons-sprite(box-add);
}輸出的CSS 如下：
.icons-sprite,
.add-button {
background: url('/images/icons-s0cad3f8f97.png') no-repeat;
}
.add-button { background-position: 0 -358px; }有了single-sprite混合器，就沒有必要生成一個類名了，因爲樣式已經包含在了選擇器裏。當Compass添加background-image和background-position樣式時，會直接使用這些選擇器，在這個例子裏是.add-button。
相比簡單方便的all-sprites混合器，這個方式生成更少的CSS，也讓你對輸出有更多的控制