(二)在實戰中使用Sass和Compass，sasscompass

(二)在實戰中使用Sass和Compass，sasscompass
第三章 無需計算玩轉CSS網格布局3.1 網格布局介紹3.2 使用網格布局3.2.1 術語

1 術語名             定義                      是否涉及HTML標籤2 列           內容度量的垂直單位                    否3 容器         構成一個網格布局的HTML元素             是4 槽           網格布局中列與列之間的統一留白          否

3.2.3 固定的網格布局還是流動的網格布局

1 // 由於網路使用者的螢幕尺寸不一,設計人員有兩種選擇：2 // 1.要麼選擇一種對於大多數使用者合理的固定式配置大小(並且限制這種布局內的內容不溢出);3 // 2.要麼實現一種靈活的流動布局,讓內容自適應使用者的螢幕,甚至當瀏覽器視窗大小改變時也會自適應;

3.3 使用Blueprint

1 // Blueprint把一些通用的對網格布局/段落和表格進行樣式修飾的CSS技術打包到一個架構中,然後可以在各個項目中通用這個架構;2 // 安裝Blueprint3 C:\Users\DELL>gem install compass-blueprint

3.3.2 使用Compass應用Blueprint

 1 // 建立一個基本的Blueprint項目 2 C:\Users\DELL>compass create simple --using blueprint/basic 3 directory simple/ 4 directory simple/images/ 5 directory simple/sass/ 6 directory simple/sass/partials/ 7 directory simple/stylesheets/ 8    create simple/config.rb 9    create simple/sass/screen.scss10    create simple/sass/partials/_base.scss11    create simple/sass/print.scss12    create simple/sass/ie.scss13    create simple/images/grid.png14     write simple/stylesheets/ie.css15     write simple/stylesheets/print.css16     write simple/stylesheets/screen.css17 18 // 在screen.scss檔案產生↓↓↓↓↓↓↓↓↓↓:19     // This import applies a global reset to any page that imports this stylesheet.20     @import "blueprint/reset";              // 預設的Blueprint重設模組;21 22     // To configure blueprint, edit the partials/_base.sass file.23     @import "partials/base";                // 網格布局設定;24 25     // Import all the default blueprint modules so that we can access their mixins.26     @import "blueprint";                    // 讓Blueprint的模組可用;27 28     // Import the non-default scaffolding module.29     @import "blueprint/scaffolding";        // 引入腳手架;30 31     // Generate the blueprint framework according to your configuration:32     @include blueprint;                     // 產生網格布局;33 34     @include blueprint-scaffolding;         // 表單和其他Blueprint元件;

3.3.3 使用Compass應用無需類名的Blueprint

 1 C:\Users\DELL>compass create simple --using blueprint/semantic 2  3 Sass: 4     #container { 5         @include container; 6     } 7 CSS: 8     #container { 9       width: 950px;10       margin: 0 auto;11       overflow: hidden;12       *zoom: 1;13     }

3.4 使用960網格布局系統

 1 // 安裝960系統; 2 C:\Users\DELL>gem install compass-960-plugin 3  4 // 建立一個960網格系統的Compass項目 5 C:\Users\DELL>compass create -r ninesixty twelve_col --using 960 6 directory twelve_col/ 7 directory twelve_col/sass/ 8 directory twelve_col/stylesheets/ 9    create twelve_col/config.rb10    create twelve_col/sass/grid.scss11    create twelve_col/sass/text.scss12     write twelve_col/stylesheets/grid.css13     write twelve_col/stylesheets/text.css

3.5 通過Compass處理垂直韻律

1 @import "compass/typography";       // 引入段落模組;2 $base-font-size:16px;               // 聲明字型大小;3 $base-line-height:24px;4 @include establish-baseline;5 h1 { @include adjust-font-size-to(48px); }

3.5.2 前置和後置

 1 // leader混合器在元素前加一個基準單位的外間距; 2 // trailer混合器在元素的後邊加了一個基準單位的外間距; 3 p { @include leader; @include trailer; } 4 Sass: 5     p {  6       @include leader; 7       @include trailer; 8     } 9 CSS:10     p {11       margin-top: 1.5em;12       margin-bottom: 1.5em;13     }

3.6 小結

1 // 流行的CSS網格架構如何簡化維護留白和快速構建原型設計;2 // 通過添加一些CSS類,就可以建立彼此之間有統一間距的豎列內容;

 

第四章 有Compass不再枯燥

// 使用Compass重設瀏覽器預設樣式;

// 改進樣式表排版的Compass輔助器;

// 使用Compass建立粘滯的頁尾/多樣化的表格以及浮動;

4.1.1 全域樣式重設--global-reset4.1.2 通過有針對性的樣式重設進行更多控制

1 @import "compass/reset/utilities";2 >1.HTML5樣式重設--@include reset-html53 >2.Compass文檔中更多的樣式重設4     >>1.reset-box-model:移除元素的內邊距和邊框;5     >>2.reset-font:重設文字的字型大小和基準;6     >>3.reset-focus:移除瀏覽器提供的輪廓線;7     >>4.reset-table和reset-table-cell:重設表格的邊框和對齊;8     >>5.reset-quotation:為<blockquotes>添加僅存在於樣式表中的雙引號;

4.2 更快更直觀的排版協助工具輔助4.2.1 連結協助工具輔助

1 >1.為連結配色;2     a { @include link-colors(#333,#00f,#f00,#555,#f00); }3 >2.通過hover-link設定懸停樣式(設定底線);4     a { @include hover-link }5 >3.通過unstyled-link設定隱性的連結(去掉顏色/游標樣式/底線);6     p.secret a { @include unstyled-link }

4.2.2 列表協助工具輔助--建立各種各樣的列表

 1 >1.用pretty-bullets裝點列表(利用背景圖片顯示列表的項目符號) 2     ul.features { 3         @include pretty-bullets('pretty-bullet.png'); 4     } 5 >2.通過no-bullet和no-bullets去掉項目符號 6     li.no-bullet { @include no-bullet }             // 去掉li類no-bullet的符號; 7     ul.no-bullet { @include no-bullets }            // 去掉整個列表的項目符號; 8 >3.輕鬆橫向排布 9     // horizontal-list混合器有兩個參數:$padding(內邊距)和$direction(浮動方向);10     ul.nav { @include horizontal-list }　　　　　　11     ul.nav { @include horizontal-list(7px,right) }　// 列表水平排列;12 >4.用inline-list處理內聯列表13     ul.words { @include delimited-list }            // 將列表設定成內聯的樣式;14     ul.words { @include delimited-list("!") }       // 自訂分隔字元;

4.2.3 文本協助工具輔助--用協助工具輔助征服文字

1 >1.用省略符號代表截斷內容(text-overflow:ellipsis);2     td.dot { @include ellipsis; }3 >2.用nowrap防止文本折行4     td { @include nowrap }5 >3.用replace-text將文字替換圖片6     h1.coffee { @include replace-text("coffee-header.png") }

4.3 布局協助工具輔助4.3.1 粘滯的頁尾

// 產生一個高40px的頁尾,並且始終在最下面;

1 @include sticky-footer { 40px, "#content", "#footer", "#sticky-footer"};

4.3.2 可伸展元素

// 元素絕對位置,距離邊界5px;

1 // stretch混合器有4個參數:$offset-top/$offset-right/$offset-bottom/$offset-left;2 a.logo { @include stretch(5px,5px,5px,5px) }

4.4 小結

// 本章,我們瞭解了Compass省時省力的工具;

// 包括:連結/列表/文本/布局;

 

第五章 通過Compass使用CSS3

// 用Compass的CSS3模組建立跨瀏覽器的CSS3樣式表

// 在低版本IE中支援一些CSS3的特性

// Compass裡的CSS3高階技能

5.1 新屬性:瀏覽器首碼

 1 // 引入CSS3模組 2 @import "compass/css3"; 3 Sass: 4     .notice { 5         @include border-radius(5px); 6     } 7 CSS: 8     .notice { 9         -moz-border-radius: 5px;10         -webkit-border-radius: 5px;11         border-radius: 5px;12     }

5.2 通過Compass使用CSS35.2.1 圓角

1 button.rounded {2     @include border-radius (5px);3 }

5.2.2 CSS3陰影--text-shadow和box-shadow

 1 Sass: 2     $shadow-1:rgba(#000,.5) -200px 0 0; 3     $shadow-2:rgba(#000,.3) -400px 0 0; 4     h2 { 5         @include box-shadow($shadow-1); 6         @include text-shadow($shadow-1,$shadow-2); 7     } 8 CSS: 9     h2 {10       -moz-box-shadow: rgba(0, 0, 0, 0.5) -200px 0 0;11       -webkit-box-shadow: rgba(0, 0, 0, 0.5) -200px 0 0;12       box-shadow: rgba(0, 0, 0, 0.5) -200px 0 0;13       text-shadow: rgba(0, 0, 0, 0.5) -200px 0 0, rgba(0, 0, 0, 0.3) -400px 0 0;14     }

5.2.3 色彩坡形

 1 #pattern { 2     @include background( 3         linear-gradient( 4             360deg, 5             #bfbfbf 0%, 6             #bfbfbf 12.5% 7             #bfbf00 12.5%, 8             #bfbf00 25%, 9             ...10         )11     );12     width:400px;13     height:300px;14 }

5.2.4 用@font-face嵌入字型

1 @include font-face ("ChunkFiveRegular",2     font-files("ChunkFiveRegular-webfont.woff",woff,3                "ChunkFiveRegular-webfont.woff",ttf, 4                "ChunkFiveRegular-webfont.woff",svg,5                "ChunkFiveRegular-webfont.woff",normal,normal));

5.4 小結

// 使用CSS3混合器實現:圓角/陰影/漸層以及文字引入;