首頁 > 開發者 > JavaScript
compass模組，compass引入模組路徑
Compass核心模組
Reset ：重設CSS模組
@import "compass/reset"
Layout ：頁面配置的控制能力
@import "compass/layout"
只有這兩個模組是需要明確 指定引入的
@import "compass"預設包含了其他五大模組卻不包含resrt,layout
其他四個功能模組和Browser support模組
CSS3：跨瀏覽器的CSS3能力
Helpers：內含一系列的函數，跟SASS的函數列表很像，比較少用，功能確實豐富強大
Typography：修飾我們的文本樣式，垂直韻律
Utilities：沒有辦法放到其他模組的內容都可以放到這個模組裡。協助工具輔助類別模組，helpers都是函數，utilities多是mixin
Browser：配置compass預設支援哪些瀏覽器。對於特定瀏覽器預設支援到哪個版本。一個修改將影響六個模組的輸出。不同的瀏覽器做不同的適配。
Compass核心模組概述&Reset模組
compass-normalize外掛程式命令安裝：
gem install compass-normalize
引入compass-normalize外掛程式
config.rb檔案裡：
require 'compass-normalize'
擴充：
config.rb檔案裡的import-once解決了多次@import同一個檔案，compass也只會插入一次被引入問件。但使用了import-once萬一遇到真的遇到一個檔案必須被引入兩次的情況，可以通過被引入檔案的檔案名稱的後面加一個驚嘆號！方式來告知compass這裡需要重複引入。@import "compass/reset!"
在SCSS檔案中引用normalize
@import "normalize";
Normalize核心模組：
base：用來統一HTML和body標籤的字型，文字大小調整、邊距等等。
html5：統一html5中新增的元素的展現形式
links：統一a便簽的樣式修飾，去掉hover和active時候的邊線。
typography：統一b、strong、sub、sup等段落文本的樣式修飾。
embeds：統一img，svg等標籤的樣式修飾（比如統一img標籤的border為0 ）
groups：統一figure、pre、code等標籤的樣式
forms：統一form相關的button、input、等標籤的樣式
tables：統一table相關的table、td、th等標籤的樣式
引入(通過子路徑的方式)：
@import "normalize-version"//--在引入子類之前需要引入normalize-version@import "normalize/base"
@import "compass/reset/untlities"; .....引入這些mixin的集合
@import "compass/reset"; 其實就是引入了compass/reset/untlities，然後調用了其中的一個global-reset();的mixin集合。
@import "compass/reset/untlities";include global-reset();
reset Utilities核心mixin
http://compass-style.org/reference/compass/reset/utilities/
nested-reset：只用於重設我們頁面上的某個選取器下的所有元素。
例如重設reset-sec的所有元素：
.reset-sec{ @include nested-reset;}
Layout模組（使用率最低的模組）
layout模組下面又細分3個核心mixin模組，可以分別引入。
1 @import "compass/layout";2 @import "compass/layout/grid-background";3 @import "compass/layout/sticky-footer";4 @import "compass/layout/stretching";
stretching模組，按父元素尺寸展開元素，樣本：
1 .stretch-full {2 @include stretch();3 }4 .stretch-full2 {5 @include stretch(5px,0px,5px,5px); //非0值單位px不可省6 }7 .stretch-full3 {8 @include stretch($offset-top:5px,$offset-right:0px,$offset-bottom:5px,$offset-left:5px); //參數順序可變,非0值單位px不可省9 }
經過sass轉換後代碼：
1 .stretch-full { 2 position: absolute; 3 top: 0; 4 bottom: 0; 5 left: 0; 6 right: 0; 7 } 8 .stretch-full2 { 9 position: absolute;10 top: 5px;11 bottom: 0;12 left: 5px; right: 5px;13 }14 .stretch-full3 {15 position: absolute; 16 top: 5px;17 bottom: 5px;18 left: 5px; right: 0px;19 }
sticky-footer模組,提供footer總在頁面最底部的解決方案，需要固定的結構：
1 <body>2 <div id="root">3 <div id="root_footer"></div>4 </div>5 <div id="footer">6 Footer content goes here.7 </div>8 </body>
@include sticky-footer(54px) //參數為footer高度@include sticky-footer(54px, "#my-root", "#my-root-footer", "#my-footer") // 自訂選取器
CSS3模組&Browser Support模組(主動使用率較高的模組)
在用CSS3模組的時候要調整Browser Support模組的配置，即使不主動調整CSS3也引入了Browser Support模組。CSS3模組主要用於跨瀏覽的CSS3的能力。
例：
1 @import "compass/css3";2 .webdome-sec{3 @include box-shadow(1px 1px 3px 2px #cfcecf);4 }
產生的程式碼：
1 .webdemo-sec {2 -moz-box-shadow: 1px 1px 3px 2px #cfcedf;3 -webkit-box-shadow: 1px 1px 3px 2px #cfcedf;4 box-shadow: 1px 1px 3px 2px #cfcedf;5 }
假如不需要自動產生Firefox的適配代碼，這時就需要用Browser Support模組。來配置compass預設支援哪些瀏覽器。對於特定瀏覽器支援到哪個版本。Browser Support模組一但修改將影響其餘六個模組的輸出。
引入support：
@import "compass/support";
引入了CSS3模組，相當於間接引入了support模組。
查看當前支援的瀏覽器版本：
控制台命令：
1 compass interactive //進入一個用於測試Compass中SassScript的控制台2 browsers() //查看支援的瀏覽器3 browser-versions(chrome) //查看支援的chrome版本
在sass檔案中輸入 @debug browsers() 控制台也會列印出支援的瀏覽器。
設定compass支援的瀏覽器：
@import "compass/css3";$supported-browsers: chrome firefox;
也可以寫成： $supported-browsers: chrome,firefox ; 瀏覽器隊列用 空格或者逗號分隔均可。
設定compass支援的瀏覽器的最低版本（compass預設支援到ie5.5）：
$browser-minimum-versions:("ie":"8","":"")
不設定的話 預設支援 browsers-versions 返回的的版本。
Animation：CSS3動畫相關的特性。
Appearance：CSS3的appearance屬性，也是CSS3的新規範中新定義的新屬性。（還沒有一個主流的瀏覽器支援這個屬性）
Background Clip、Background Origin、Background Size：CSS3新增的background相關的屬性，用來規定背景的繪製地區、背景映像的定位原點、背景映像的尺寸等。
Border Radius：邊框圓角屬性
Box、Box Shadow
Box Sizing：用來修改盒模型的寬高的度量方式。
CSS Regions：控制內容布局的新方式
CSS3 Pie：儘可能提高ie瀏覽器呈現許多CSS3功能
Columns：CSS3的多欄版面配置屬性
Filter：主要用於在圖片上實現一些特效
Flexbox：（移動端web開發用的比較多）
Font Face：不依賴於使用者電腦上安裝好的字型，指定下載好的某一種字型
Hyphenation：如何斷字換行
Images：CSS3新增了這種產生漸層圖形的方式，images用於需要使用這兩種方式充當圖片的情境。
Inline Block：實現跨瀏覽器的display:inline-block;能力
Opacity：透明屬性，為了相容低版本的IE
Selection：使用CSS3的selection虛擬元素定義被選中文本的顏色和背景色
Shared Utilities：想貢獻CSS3模組的相關compass外掛程式會用到。工具類別模組
Text Shadow：文字陰影屬性
Transform、Transition：變幻動畫屬性
User Interface：限制某一地區是否允許滑鼠拖拽選擇，input元素在無填寫狀態下提示的樣式
Typography模組
分為四個模組：
Links：連結修飾模組正常態下去掉底線，在hover的情況下才顯示這個底線hover-link();
1 a{2 @include hover-link();3 }
編譯之後：
1 a {2 text-decoration: none;3 }4 a:hover, a:focus {5 text-decoration: underline;6 }
修改不同狀態下超連結的顏色link-colors
抹平超連結樣式，和他跟父容器的文本無異unstyled Link
Lists：列表修飾模組
Text：文本修飾模組
Vertical Rhythm：垂直韻律修飾模組
@import "compass/typography/vertical_rhythm";
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
