關于Compass

常用操作指令 //使用下邊的指令，編譯出css。該項目在根目錄下運作，會編譯所有sass檔案夾中的sass檔案，并放入stylesheets檔案夾中 compass compile //預設狀态下編譯出的css檔案帶有大量的注釋。但生産環境中需要壓縮的css檔案，此時使用： compass compile --output-style compressed//compass隻編譯發生變動的sass檔案，若要重新編譯未改動的檔案，則： compass compile --force//除了指令行，還可以在建立項目中的配置檔案config.rb中指定編譯模式。:expanded模式表示編譯後保留原格式，其他值還包括:nested、:compact和:compressed。進入生産階段後，就要改為:compressed模式。 output_style = :expanded //除了上邊的一次性編譯，還可以設定監視自動編譯： compass watch //這樣隻要sass檔案發生變化，css就實時重新整理。

1，核心子產品： （這兩個子產品需要明确引入） 1，reset 浏覽器樣式重置子產品，減少浏覽器差異 2，layout子產品用來提供頁面布局控制能力 3，Helpers CSS3 Typography Utilities （@import "compass"）

2，Normalize核心子產品，分别normalize不同子產品 base html5 links typography embeds groups forms tables @import "normalize-version"; @import "normalize/base"; @import "normalize/html5"; @import "normalize/links";

3，@import "compass/reset/utilities"; @import "compass/reset"; //調用了compass的utilities的global reset的mixin 即 @include global-reset(); ()可省略

reset包含12個核心mixin

4，layout子產品 1,@import "compass/layout"; 2,@import "compass/layout/grid-background"; $grid-background-color-column-color: rgba(255,0,0,.25); #include grid-background(); 3,@import "compass/layout/sticky-footer"; @include sticky-footer(30px,"#my-root","#my-root-footer","#my-footer"); 4,@import "compass/layout/stretching"; //元素拉伸填滿整個子元素的能力， @include stretch($offset-top:3px, ......); @include stretch-y(); @include stretch-x();

5,css3子產品 @import "compass/css3";

6,browsers-support子產品 @import "compass/support"; //支援哪些浏覽器，可以不寫，css3子產品自帶 @debug browsers(); //輸出支援的浏覽器 browser-version(chrome); //輸出支援的浏覽器版本 $supported-browsers:chrome; //指定支援的浏覽器 $brower-minimum-versions:("ie","8"); //指定最低的版本

7，typography子產品 1，@import "compass/typography"; 2，@import "compass/typography/links"; Hover Link @include hover-link(); Link Colors （normal hover active visited focus） @include link-colors(#00c, #0cc, #c0c, #ccc, #cc0) 第一個參數必須 Unstyled Link @include unstyled-link(); 抹平超連結樣式，與普通文字一樣 3，@import "compass/typography/lists"; Bullets – @include no-bullets(); style為none Horizontal List – @include horizontal-list($padding, $direction) 浮動 @mixin horizontal-list($padding: 4px, $direction: left) { @include horizontal-list-container; li { @include horizontal-list-item($padding, $direction); } } @include horizontal-list(false)，相容ie Inline-Block List –@mixin inline-block-list($padding: false) { @include inline-block-list-container; li { @include inline-block-list-item($padding); } } Inline List – @include inline-list(); //display：inline；

4, @import "compass/typography/text"; Ellipsis – 用省略号表示多餘的文字 .test-ellipsis { white-space: nowrap; overflow: hidden; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; -moz-binding: url('/stylesheets/xml/ellipsis.xml#ellipsis'); } $use-mozilla-ellipsis-binding: true; 對firefox低版本的支援 Force Wrap – 強制換行 @mixin force-wrap { white-space: pre; // CSS 2.0 white-space: pre-wrap; // CSS 2.1 white-space: pre-line; // CSS 3.0 white-space: -pre-wrap; // Opera 4-6 white-space: -o-pre-wrap; // Opera 7 white-space: -moz-pre-wrap; // Mozilla white-space: -hp-pre-wrap; // HP Printers word-wrap: break-word; // IE 5+ } No Wrap – 強制不換行 @mixin nowrap { white-space: nowrap; }

5， @import "compass/typography/vertical_rhythm"; 使得元素的高是基準高的整數倍 @include debug-vertical-alignment(); //基準線圖檔 @import "compass/typography/vertical_rhythm";

$base-font-size: 16px; $base-line-height: 24px; @include establish-baseline();

.body { @include debug-vertical-alignment(); } h1 { @include adjust-font-size-to(3em); } h2 { @include adjust-font-size-to(2.25em); } h3 { @include adjust-font-size-to(1.5em); p { @include adjust-font-size-to(1em); //設定font-size和line-height font-size: 1em; line-height: 1.5em; @include leader(); //設定margin-top，預設為1.5em @include trailer(); //設定margin-bottom，預設為1.5em }

8，helper子產品

在選擇器屬性名或者字元串裡面引用sass變量或者函數時，、

#{append-selector("p,div,span",".bar")}{ color:red; }

9, utilities子產品 @import "compass/utilities" Color General Print Sprites Tables Sprites： 合成雪碧圖（隻支援png檔案） @import "compass/utilities/sprites"; @import "logopng" 形成顯式檔案夾，檔案中有minxin 在其他類名中顯示同一張圖檔 .main-logo { @include logo-sprite("teacher1"); } $logo-sprite-dimensions: true; // 用來控制輸出CSS的時候是否根據圖檔大小對我們的相應類名css屬性添加一個寬和高。 $disable-magic-sprite-selectors: true; //取消active hover的樣式 $logo-layout: smart; //布局可以是vertical horizontal diagonal 等等