compass模塊

時間 2019-11-13

標籤 compass 模塊简体版

原文原文鏈接

Compass核心模塊
Reset ：重置CSS模塊css

 @import "compass/reset"

Layout ：頁面佈局的控制能力html

@import "compass/layout"

只有這兩個模塊是須要明確指定引入的
@import "compass"默認包含了其餘五大模塊卻不包含resrt,layouthtml5

其餘四個功能模塊和Browser support模塊
CSS3：跨瀏覽器的CSS3能力
Helpers：內含一系列的函數，跟SASS的函數列表很像，比較少用，功能確實豐富強大
Typography：修飾咱們的文本樣式，垂直韻律
Utilities：沒有辦法放到其餘模塊的內容均可以放到這個模塊裏。輔助工具類模塊，helpers都是函數，utilities可能是mixin
Browser：配置compass默認支持哪些瀏覽器。對於特定瀏覽器默認支持到哪個版本。一個修改將影響六個模塊的輸出。不一樣的瀏覽器作不一樣的適配。css3

Compass核心模塊概述&Reset模塊web

compass-normalize插件命令安裝：chrome

gem install compass-normalize

引入compass-normalize插件
config.rb文件裏：瀏覽器

require 'compass-normalize'

擴展：
config.rb文件裏的import-once解決了屢次@import同一個文件，compass也只會插入一次被引入問件。但使用了import-once萬一遇到真的遇到一個文件必須被引入兩次的狀況，能夠經過被引入文件的文件名的後面加一個感嘆號！方式來告知compass這裏須要重複引入。@import "compass/reset!"sass

在SCSS文件中引用normalizeapp

@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等標籤的樣式dom

引入(經過子路徑的方式)：

@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";

1. Compass排版模塊
2. Compass的CSS3模塊
3. Compass佈局模塊
4. Compass的模塊介紹
5. 201504191445_《Compass核心模塊》
6. compass模塊----Utilities----Sprites精靈圖合圖
7. MongoDB Compass
8. compass sprites
9. sass和compass學習筆記2（compass）
10. 【解決】安裝compass失敗(gem install compass)
更多相關文章...
• Lua 模塊與包 - Lua 教程
• DTD - XML 構建模塊 - DTD 教程
• 委託模式
• NewSQL-TiDB相關

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。