(二)在实战中使用Sass和Compass
第三章 无需计算玩转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 // 安装Blueprint 3 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.scss 10 create simple/sass/partials/_base.scss 11 create simple/sass/print.scss 12 create simple/sass/ie.scss 13 create simple/images/grid.png 14 write simple/stylesheets/ie.css 15 write simple/stylesheets/print.css 16 write simple/stylesheets/screen.css 17 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.rb 10 create twelve_col/sass/grid.scss 11 create twelve_col/sass/text.scss 12 write twelve_col/stylesheets/grid.css 13 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-reset
4.1.2 通过有针对性的样式重置进行更多控制
1 @import "compass/reset/utilities"; 2 >1.HTML5样式重置--@include reset-html5 3 >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使用CSS3
5.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混合器实现:圆角/阴影/渐变以及文字引入;
