术语名             定义                      是否涉及HTML标签

 列           内容度量的垂直单位                    否

 容器         构成一个网格布局的HTML元素             是

 槽           网格布局中列与列之间的统一留白          否

 // 由于网络用户的屏幕尺寸不一,设计人员有两种选择：

 // 1.要么选择一种对于大多数用户合理的固定布局大小(并且限制这种布局内的内容不溢出);

 // 2.要么实现一种灵活的流动布局,让内容自适应用户的屏幕,甚至当浏览器窗口大小改变时也会自适应;

 // Blueprint把一些通用的对网格布局/段落和表格进行样式修饰的CSS技术打包到一个框架中,然后可以在各个项目中通用这个框架;

 // 安装Blueprint

 C:\Users\DELL>gem install compass-blueprint

 // 创建一个基本的Blueprint项目

 C:\Users\DELL>compass create simple --using blueprint/basic

 directory simple/

 directory simple/images/

 directory simple/sass/

 directory simple/sass/partials/

 directory simple/stylesheets/

    create simple/config.rb

    create simple/sass/screen.scss

    create simple/sass/partials/_base.scss

    create simple/sass/print.scss

    create simple/sass/ie.scss

    create simple/images/grid.png

     write simple/stylesheets/ie.css

     write simple/stylesheets/print.css

     write simple/stylesheets/screen.css

 // 在screen.scss文件生成↓↓↓↓↓↓↓↓↓↓:

     // This import applies a global reset to any page that imports this stylesheet.

     @import "blueprint/reset";              // 默认的Blueprint重置模块;

     // To configure blueprint, edit the partials/_base.sass file.

     @import "partials/base";                // 网格布局设置;

     // Import all the default blueprint modules so that we can access their mixins.

     @import "blueprint";                    // 让Blueprint的模块可用;

     // Import the non-default scaffolding module.

     @import "blueprint/scaffolding";        // 引入脚手架;

     // Generate the blueprint framework according to your configuration:

     @include blueprint;                     // 生成网格布局;

     @include blueprint-scaffolding;         // 表单和其他Blueprint元件;

 C:\Users\DELL>compass create simple --using blueprint/semantic

 Sass:

     #container {

         @include container;

     }

 CSS:

     #container {

       width: 950px;

       margin: 0 auto;

       overflow: hidden;

       *zoom: 1;

     }

 // 安装960系统;

 C:\Users\DELL>gem install compass-960-plugin



 // 创建一个960网格系统的Compass项目

 C:\Users\DELL>compass create -r ninesixty twelve_col --using 960

 directory twelve_col/

 directory twelve_col/sass/

 directory twelve_col/stylesheets/

    create twelve_col/config.rb

    create twelve_col/sass/grid.scss

    create twelve_col/sass/text.scss

     write twelve_col/stylesheets/grid.css

     write twelve_col/stylesheets/text.css

 @import "compass/typography";       // 引入段落模块;

 $base-font-size:16px;               // 声明字体大小;

 $base-line-height:24px;

 @include establish-baseline;

 h1 { @include adjust-font-size-to(48px); }

 // leader混合器在元素前加一个基线单位的外间距;

 // trailer混合器在元素的后边加了一个基线单位的外间距;

 p { @include leader; @include trailer; }

 Sass:

     p {

       @include leader;

       @include trailer;

     }

 CSS:

     p {

       margin-top: 1.5em;

       margin-bottom: 1.5em;

     }

 // 流行的CSS网格框架如何简化维护留白和快速构建原型设计;

 // 通过添加一些CSS类,就可以创建彼此之间有统一间距的竖列内容;

 @import "compass/reset/utilities";

 >1.HTML5样式重置--@include reset-html5

 >2.Compass文档中更多的样式重置

     >>1.reset-box-model:移除元素的内边距和边框;

     >>2.reset-font:重置文字的字号和基线;

     >>3.reset-focus:移除浏览器提供的轮廓线;

     >>4.reset-table和reset-table-cell:重置表格的边框和对齐方式;

     >>5.reset-quotation:为<blockquotes>添加仅存在于样式表中的双引号;

 >1.为链接配色;

     a { @include link-colors(#333,#00f,#f00,#555,#f00); }

 >2.通过hover-link设置悬停样式(设置下划线);

     a { @include hover-link }

 >3.通过unstyled-link设置隐性的链接(去掉颜色/光标样式/下划线);

     p.secret a { @include unstyled-link }

 >1.用pretty-bullets装点列表(利用背景图片显示列表的项目符号)

     ul.features {

         @include pretty-bullets('pretty-bullet.png');

     }

 >2.通过no-bullet和no-bullets去掉项目符号

     li.no-bullet { @include no-bullet }             // 去掉li类no-bullet的符号;

     ul.no-bullet { @include no-bullets }            // 去掉整个列表的项目符号;

 >3.轻松横向排布

     // horizontal-list混合器有两个参数:$padding(内边距)和$direction(浮动方向);

     ul.nav { @include horizontal-list }　　　　　　

     ul.nav { @include horizontal-list(7px,right) }　// 列表水平排列;

 >4.用inline-list处理内联列表

     ul.words { @include delimited-list }            // 将列表设置成内联的样式;

     ul.words { @include delimited-list("!") }       // 自定义分隔符;

 >1.用省略号代表截断内容(text-overflow:ellipsis);

     td.dot { @include ellipsis; }

 >2.用nowrap防止文本折行

     td { @include nowrap }

 >3.用replace-text将文字替换图片

     h1.coffee { @include replace-text("coffee-header.png") }

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

 // stretch混合器有4个参数:$offset-top/$offset-right/$offset-bottom/$offset-left;

 a.logo { @include stretch(5px,5px,5px,5px) }

 // 引入CSS3模块

 @import "compass/css3";

 Sass:

     .notice {

         @include border-radius(5px);

     }

 CSS:

     .notice {

         -moz-border-radius: 5px;

         -webkit-border-radius: 5px;

         border-radius: 5px;

     }

 button.rounded {

     @include border-radius (5px);

 }

 Sass:

     $shadow-1:rgba(#000,.5) -200px 0 0;

     $shadow-2:rgba(#000,.3) -400px 0 0;

     h2 {

         @include box-shadow($shadow-1);

         @include text-shadow($shadow-1,$shadow-2);

     }

 CSS:

     h2 {

       -moz-box-shadow: rgba(0, 0, 0, 0.5) -200px 0 0;

       -webkit-box-shadow: rgba(0, 0, 0, 0.5) -200px 0 0;

       box-shadow: rgba(0, 0, 0, 0.5) -200px 0 0;

       text-shadow: rgba(0, 0, 0, 0.5) -200px 0 0, rgba(0, 0, 0, 0.3) -400px 0 0;

     }

 #pattern {

     @include background(

         linear-gradient(

             360deg,

             #bfbfbf 0%,

             #bfbfbf 12.5%

             #bfbf00 12.5%,

             #bfbf00 25%,

             ...

         )

     );

     width:400px;

     height:300px;

 }

 @include font-face ("ChunkFiveRegular",

     font-files("ChunkFiveRegular-webfont.woff",woff,

                "ChunkFiveRegular-webfont.woff",ttf,

                "ChunkFiveRegular-webfont.woff",svg,

                "ChunkFiveRegular-webfont.woff",normal,normal));