(二)在实战中使用Sass和Compass

第三章 无需计算玩转CSS网格布局

3.1 网格布局介绍

3.2 使用网格布局

3.2.1 术语

术语名             定义                      是否涉及HTML标签
列           内容度量的垂直单位                    否
容器         构成一个网格布局的HTML元素             是
槽           网格布局中列与列之间的统一留白          否

3.2.3 固定的网格布局还是流动的网格布局

// 由于网络用户的屏幕尺寸不一,设计人员有两种选择：
// 1.要么选择一种对于大多数用户合理的固定布局大小(并且限制这种布局内的内容不溢出);
// 2.要么实现一种灵活的流动布局,让内容自适应用户的屏幕,甚至当浏览器窗口大小改变时也会自适应;

3.3 使用Blueprint

// Blueprint把一些通用的对网格布局/段落和表格进行样式修饰的CSS技术打包到一个框架中,然后可以在各个项目中通用这个框架;
// 安装Blueprint
C:\Users\DELL>gem install compass-blueprint

3.3.2 使用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元件;

3.3.3 使用Compass应用无需类名的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;
    }

3.4 使用960网格布局系统

// 安装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

3.5 通过Compass处理垂直韵律

@import "compass/typography";       // 引入段落模块;
$base-font-size:16px;               // 声明字体大小;
$base-line-height:24px;
@include establish-baseline;
h1 { @include adjust-font-size-to(48px); }

3.5.2 前置和后置

// leader混合器在元素前加一个基线单位的外间距;
// trailer混合器在元素的后边加了一个基线单位的外间距;
p { @include leader; @include trailer; }
Sass:
    p { 
      @include leader;
      @include trailer;
    }
CSS:
    p {
      margin-top: 1.5em;
      margin-bottom: 1.5em;
    }

3.6 小结

// 流行的CSS网格框架如何简化维护留白和快速构建原型设计;
// 通过添加一些CSS类,就可以创建彼此之间有统一间距的竖列内容;

 

第四章 有Compass不再枯燥

// 使用Compass重置浏览器默认样式;

// 改进样式表排版的Compass辅助器;

// 使用Compass创建粘滞的页脚/多样化的表格以及浮动;

4.1.1 全局样式重置--global-reset

4.1.2 通过有针对性的样式重置进行更多控制

@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>添加仅存在于样式表中的双引号;

4.2 更快更直观的排版辅助工具

4.2.1 链接辅助工具

>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 }

4.2.2 列表辅助工具--创建各种各样的列表

>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("!") }       // 自定义分隔符;

4.2.3 文本辅助工具--用辅助工具征服文字

>1.用省略号代表截断内容(text-overflow:ellipsis);
    td.dot { @include ellipsis; }
>2.用nowrap防止文本折行
    td { @include nowrap }
>3.用replace-text将文字替换图片
    h1.coffee { @include replace-text("coffee-header.png") }

4.3 布局辅助工具

4.3.1 粘滞的页脚

// 生成一个高40px的页脚,并且始终在最下面;

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

4.3.2 可伸展元素

// 元素绝对定位,距离边界5px;

// stretch混合器有4个参数:$offset-top/$offset-right/$offset-bottom/$offset-left;
a.logo { @include stretch(5px,5px,5px,5px) }

4.4 小结

// 本章,我们了解了Compass省时省力的工具;

// 包括:链接/列表/文本/布局;

 

第五章 通过Compass使用CSS3

// 用Compass的CSS3模块创建跨浏览器的CSS3样式表

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

// Compass里的CSS3高阶技能

5.1 新属性:浏览器前缀

// 引入CSS3模块
@import "compass/css3";
Sass:
    .notice {
        @include border-radius(5px);
    }
CSS:
    .notice {
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }

5.2 通过Compass使用CSS3

5.2.1 圆角

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

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

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;
    }

5.2.3 颜色渐变

#pattern {
    @include background(
        linear-gradient(
            360deg,
            #bfbfbf 0%,
            #bfbfbf 12.5%
            #bfbf00 12.5%,
            #bfbf00 25%,
            ...
        )
    );
    width:400px;
    height:300px;
}

5.2.4 用@font-face嵌入字体

@include font-face ("ChunkFiveRegular",
    font-files("ChunkFiveRegular-webfont.woff",woff,
               "ChunkFiveRegular-webfont.woff",ttf, 
               "ChunkFiveRegular-webfont.woff",svg,
               "ChunkFiveRegular-webfont.woff",normal,normal));

5.4 小结

// 使用CSS3混合器实现:圆角/阴影/渐变以及文字引入;