Sass与Compress实战：第四章

Posted 2020-07-18

概要：这一章将深挖Compass的工具箱，看看Compass的混合器如何帮助你省去编写重复样式表的辛苦工作。

本章内容：

　　● 使用Compass重置浏览器默认样式表

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

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

1. 一张更好的白纸源自有针对性的样式重置

1.1 全局样式重置

　　当你构建一个传统的Web应用程序时，如果需要支持很多浏览器，甚至包括低版本的Internet Explorer，那么一个全局的样式重置是非常给力的。Compass体统了一个全局的样式重置，并命名为global-reset。代码如下：

@mixin global-reset {
    html , body , div , span , applet , object , iframe , 
    h1 , h2 , h3 , h4 , h5 , h6 , p , blockquote , pre , 
    a , abbr , acronym , address , big , cite , code , 
    del , dfn , em , img , ins , kbd , q , s , samp , 
    small , strike , strong , sub , sup , tt , var , 
    b , u , i , center , 
    dl , dt , dd , ol , ul , li , 
    fieldset , form , label , legend , 
    table , caption , tbody , tfoot , thead , tr , th , td , 
    article , aside , canvas , details , embed , 
    figure , figcaption , footer , header , hgroup , 
    menu , nav , output , ruby , section , summary , 
    time , mark , audio , video {
    
    @include reset-box-model;
    @include reset-font; }
    body {
        @include reset-body ; }
    ol , ul {
        @include reset-table ; }
    table {
        @include reset-table-cell ; }
    caption , th , td {
        @include reset-quotation ; }
    a img {
        @include reset-image-anchor-border ; }
    
    @include reset-html5 ; }

　　注意，global-reset只是一个在内部应用了若干样式重置混合器的包装。这些

（通过Sass的@include引入的）混合器不仅致力于解决浏览器在盒模型、排版、列表样式、表格样式等诸多方面的不一致问题，还为新的HTML5元素添加了默认样式。

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

　　使用@import "conpass/reset/utilities"而不是全局样式重置可以有针对性的对样式进行重置。让我们看几个上一节中出现的组成全局样式的混合器：

(1) 高瞻远瞩的HTML5样式重置

　　Compass的reset-html5混合器样式重置代码：

@mixin reset-html5{
    article , aside , details , figcaption , figure , 
    footer , header , hgroup , menu , nav , section , summary {
        display : block ;
    }
}

　　现在，在你的SCSS文件中写入@include reset-html5调用这个混合器，你就不必记住这11个标记了。

(2) Compass文档中更多的样式重置

　　下表是Compass里可用更多样式重置，更多的推荐去查阅Compass文档中样式重置的完整列表。

样式重置混合器	目的
reset-box-model	移除元素的内外边距和边框
reset-font	重置文字的字号和基线
reset-focus	移除浏览器提供的轮廓线（比如Safari给<input>元素加上的那一圈线）
reset-table和reset-table-cell	重置表格的边框和对齐方式
reset-quotation	为<blockquotes>添加仅存在于样式表中的双引号

2. 更快更直观的排版工具

　　通过@import "compass / typography"使用Compass的排版模块。

2.1 起锚远航 ： 链接辅助工具

　　Compass可以轻松地定义基础的文本和链接的颜色。

　　(1) 轻轻松松为链接配色

　　根据浏览器特征设置链接颜色的CSS代码看起来像这样：

a { color : #333 }
a : visited { color : #555 } 
a : focus { color : #f00 }
a : hover { color : #00f }
a : active { color : #f00 }

　　你可以死记硬背地记住这个顺序，然后写伪类来改变链接颜色，但是Compass提供了一个方便的混合器来处理这项工作：

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

　　上面代码中的颜色顺序与CSS例子中的顺序并不吻合，因为Compass选择了针对生产效率优化的顺序，而不是按照浏览器的优先级顺序。这个link-colors的颜色参数顺序是你最可能在样式表里面使用的顺序。下表展示了link-colors完整的参数顺序和它们被应用到不同链接状态的顺序。

link-colors顺序

浏览器顺序

<a>	<a>
: hover	: visited
: active	: focus
: visited	: hover
: focus	: active

　　(2) 通过hover-link设置悬停样式

　　有些可用性专家建议链接下面始终要有下划线，以此提示用户这个东西可以点击。但在一些行高有限的情况下，增加下划线反而会降低阅读体验。假设你希望用下面的CSS实现仅当用户悬停在链接上时才显示下划线：

a { text-decoration : none }
a : hover { text-decoration : underline }

　　Compass让链接只在: hover 时加下划线变得简单了，仅仅使用hover-link混合器即可：

a { @include hover-link }

　　(3) 通过unstyled-link 设置隐性的链接

　　假设你希望在一段话里隐藏一个链接，移除所有会提示用户这是一个链接样式。你可以这么写CSS：

p .secret a ,
p .secret a:hover ,
p .secret a:focus {
    color : inherit ;
    cursor : inherit ;
    text-decoration : inherit }

　　这个建议不错，但是Compass通过unstyled-link混合器把这个工作变得更简单了：

p .secret a { @include unstyled-link }

2.2 创建各种各样的列表

　　(1) 用pretty-bullets装点列表

　　基于图片的项目符号可以为你的列表元素增加冲击力。但是IE从5.5开始支持的list-style-image属性有很多问题。比如在低于IE8的版本中，浮动列表元素不会显示列表项的图片。为了找到跨浏览器解决方案，设计师们经常使用背景图片来显示列表的项目符号：

ul .features li {
    background : url( / images / pretty-bullet.png ) 5px 5px no-repeat;
    list-style-type : none;
    padding-left : 20px;
}

　　一段小小的代码足以让你头疼。首先，你不得不根据预期的内边距和图片宽度计算布局。其次你必须知道你的图片尺寸。考虑到这些问题，Compass提供了pretty-bullets混合器，有了它，通过背景图片显示列表的项目符号就变得容易了：

ul .features{
    @include pretty-bullets( ‘ pretty-bullet.png ‘ )
}

　　(2)通过no-bullets和no-bullets去掉项目符号

　　Compass同样提供了一些快速移除<li>元素列表样式的方式。

li .no-bullet { @include no-bullet }

　　如果你希望去掉整个列表的项目符号，也可以使用复数形式的no-bullets混合器：

ul .no-bullet { @include no-bullets }

　　(3) 轻松横向排布

　　浏览器默认的列表样式是竖直排布列表项，并且有内外边距。这本是很好的显示方式，设计师们还常常喜欢横向排布包含导航链接的列表：

ul .nav {
    border : 0;
    margin : 0;
    overflow : hidden;
    padding : 0;
}
ul .nav li {
    display : inline;
    float : left;   /* 横向排布菜单 */
    margin-left : 0px;
    padding-left : 4px;
    padding-right : 4px;
}

　　有了Compass，仅仅通过引入horizontal-list混合器就可以完成这一工作。

ul .nav { @include horizontal-list }

　　(4) 用inline-list处理内联列表

　　看看下面这段代码：

<ul class="giant-words">
    <li> Fee </li>
    <li> Fi </li>
    <li> Fo </li>
    <li> Fum </li>
</ul>
<p> are some words of giants with acute senses of smell for Englishmen. </p>

　　在这个例子中，我们把列表设置成内联的样式，并用逗号隔开，这样可能读起来更合适。Compass可以用一行代码就做到：

ul .words {@include delimited-list }

　　通过组合 ：after和：last-child，Compass产生的CSS可以让列表变成内联的。Compass还可以让你定制分隔符，让这个列表更霸气：

ul .words { @include delimited-list( "!" ) }

2.3 用辅助工具征服文字

　　(1) 用省略号代表截断内容

　　将超过容器宽度的文字变成省略号的CSS实现方式是：

td .dot-dot-dot {
    white-space : nowrap;
    overflow : hidden;
    text-overflow : ellipsis ;
}

　　而Compass实现方式是：

td .dot-dot-dot {
    @include ellipsis;
}

　　使用ellipsis混合器额外的好处是可以生成带有供应商前缀的属性名。

　　值得注意的是，为了让text-overflow生效，必须同时使用white-space：nowrap。

　　(2) 用nowrap防止文本折行

　　nowrap混合器简单好用，可以产生如下CSS代码：

td { white-space : nowrap }

　　我们只需要简单的写成：

td { @include nowrap }

    (3) 用replace-text将图片转换为文字

　　尽管有诸如@font-face、Cufón等其他新技术的不断发展，设计师们在必要时还是采用传统的方法来改进Web排版——把文字处理成图片显示出来。常常在头条和其他核心的页面元素上，图片可以传递更复杂的设计元素，有时你无法用标准的字体来处理。在这些情形下，许多设计师都急于在该文本原本的位置放一张<img>了事。对于可访问性（和SEO）而言，更好的建议是用CSS来处理。实现代码：

h1 .coffee {
    text-indent : -119988px;
    overflow : hidden;
    text-align : left;
    background-image : url ( ‘ /images/coffee-header.png ‘ );
    background-repeat : no-repeat;
    background-position : 50% 50%;
}

　　Compass通过replace-text辅助器把这件事情变得更简单了：

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

3. 布局辅助工具

　　除了网格，布局模式估计是样式表中最个性化的部分。Compass提供了一对辅助器来应对不同的布局场景：粘滞的页脚和可伸展的元素。在尝试下面的例子之前请先通过@import "compass/layout";导入布局模块。

3.1 粘滞的页脚

　　想象一个场景，你需要页脚始终停靠在页面的最下方。你第一时间想到的可能是position:fixed。不幸的是，如果你需要支持IE6的话，那么CSS不会直接生效。下面我们介绍Ryan Fait的实现方式，以下面的代码为例：

<body>
    <div id="content">
        页面内容....
        <div id="bump"></div>
    </div>
    <div id="footer">
        停靠在页脚的内容
    </div>
</body>

　　可以用下面的CSS粘滞页脚：

html , body {
    height : 100%;
}

#content {
    clear : both;
    min-height : 100%;
    height : auto !important;
    height : 100%;
    margin-bottom : -40px;
}

#content #bump {
    height : 40px;
}

#footer {
    clear : both;
    position : relative;
    height : 40px;
}

而Compass的sticky-footer混合器可以让代码更简单：

@include sticky-footer ( 40px , "#content" , "#footer" , "#sticky-footer" );

3.2 可伸展元素

    流布局被认为是Web界面的核心优势之一，Web设计师也经常理所当然地使用它。而那些有桌面应用开发背景的人，却常常忽视.NET WinForms、JavaSwing、Flash等框架中常见的绝对定位方式。当然，Web通过positin: absolute支持了这种布局方式：

a .login {
    position : absolute;
    top : 5px; right : 5px; bottom : 5px; left : 5px;
}

Compass的stretch混合器提供了一个设置这些样式的快捷方式：

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

　　产出的代码和之前相同。stretch混合器有4个参数：$offset-top、$offset-right、
$offset-bottom 和$offset-left 。Compass 还提供了只设置一个轴向可拉伸的混合器
stretch-x和stretch-y，它们分别只带有$offset-left和$offset-right、$offset-top
和$offset-bottom两个参数。