Sass与Compress实战：第五章

概要：第5章展示了Compass如何使你免去编写跨浏览器的CSS3的痛苦。

本章内容：

　　● 用Compass的CSS3模块创建跨浏览器的CSS3样式表
　　● 在低版本IE中支持一些CSS3的特性
　　● Compass里的CSS3高阶技能

1.什么是CSS3

　　CSS3，或称第三代层叠样式表，是基于CSS2的规范建立起来的。CSS3的变革可以归纳为两部分——更给力的选择器，帮助我们定位元素；各种新的属性，用于修饰元素的外观。

1.1 新属性：浏览器前缀让你烦透了吧

　　由于浏览器厂商有各自的发布周期，浏览器接纳新特性的速度也不同，与此同时规范也在快速发展迭代。因此浏览器厂商通常会先以带有厂商前缀的方式引入CSS3的新特性。

1.2 让Compass拯救你

　　Compass可以生成所有的CSS前缀，如下代码所示：

@ import " compass / css3 ";
.notice {
    @include border-radius ( 5px );
}

　　在项目里，通过添加Compass的CSS3模块，使用border-radius混合器，你就可以快速生成支持所有主流浏览器的CSS代码，代码如下：

.notice {
    -moz-border-radius : 5px;
    -webkit-border-radius : 5px;
    -o-border-radius : 5px;
    -ms-border-radius : 5px;
    border-radius : 5px;
}

　　在Compass里配置厂商命名空间：

@import "compass / css3";

$experimental-support-for-opera : false;
$experimental-support-for-microsoft : false;
$experimental-support-for-khtml : false;

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

　　Compass提供了几个类似于experimental-support-for-xxxx的变量配置项。如果我们以false覆盖其默认值，Compass在产出CSS时就会忽略相应的厂商命名空间。

2. 通过Compass使用CSS3

　　2.1 圆角

　　Compass中的CSS3border-radius：

button {
    background : red;
    border : 0;
    color : #fff;
    line-height : 30px;
    width : 100px;
}

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

button.really-rounded {
    @include border-radius (10px)
}

button.extreme-rounded {
    @include border-radius (30px)
}

　　上述代码中，为button设置了一些基本样式，然后再设置每个button的圆角。很明显，被@include的border-radius是一个Sass混合器。

2.2 CSS3阴影

　　用CSS3创建阴影：

h1 {
    text-shadow : #cccccc 5px 5px 2px;
}
h2 {
    -moz-box-shadow : #cccccc 5px 5px 2px;
    -webkit-box-shadow : #cccccc 5px 5px 2px;
    box-shadow : #cccccc 5px 5px 2px;
    text-shadow : #dddddd -1px 1px 0;
    background : #999;
    padding : 1em;
}

　　你使用的CSS3的text-shadow和box-shadow实现了那两个明显的阴影，并且再次使用text-shadow实现了镂刻文字。使用Compass的box-shadow混合器：

h2 {
    @include box-shadow (#ccc 5px 5px 2px) ;
    text-shadow : #ddd -1px 1px 0 ;
    background : #999 ;
    padding : 1em ;
} 

　　Compass的box-shadow和text-shadow混合器都可以被应用为多重阴影。下面是一个运用CSS3的多重阴影的例子：

.motion {
    text-shadow : 
        rgba (0,0,0,0.5) -200px 0 0 ,
        rgba (0,0,0,0.4) -400px 0 0 ,
        rgba (0,0,0,0.3) -600px 0 0 ,
        rgba (0,0,0,0.2) -800px 0 0 ;
    font-size : 2em ;
    font-style : italic ;
    text-align : right ;
}
.simon {
    -moz-border-radius : 100px;
    -webkit-border-radius : 100px;
    border-radius : 100px;
    -moz-box-shadow :
        black 0 0 0 25px;
            red 0 -50px 0 ,
            blue 50px 0px 0 ,
            yellow 0 50px 0 ,
            lime -50px 0 0 ,
        -webkit-box-shadow : 
            black 0 0 0 25px ,
            red 0 -50px 0 ,
            blue 50px 0px 0 ,
            yellow 0 50px 0 ,
            lime -50px 0 0 ;
        box-shadow : 
            black 0 0 0 25px ,
            red 0 -50px 0 ,
            blue 50px 0px 0 ,
            yellow 0 50px 0 ,
            lime - 50px 0 0 ;
        background : #999 ;
        color : #fff ;
        height : 50px;
        margin : 100px auto ;
        padding : 40px ;
        text-align : center ;
        width : 50px ;
}

　　我们运用多重text-shadow横向排布多个阴影，并且令透明度递减，从而实现动感文本效果。Compass去掉了重复的代码：

.motion {
    @include text-shadow (
        rgba (#000 , .5) -200px 0 0 ,
        rgba (#000 , .4) -400px 0 0 ,
        rgba (#000 , .3) -600px 0 0 ,
        rgba (#000 , .2) -800px 0 0 
    ) ;
    font-size : 2em ;
    font-style : italic ;
    text-align : right ;
}
.simon {
    @include border-radius(100px) ;
    @include box-shadow(
        black 0 0 0 25px ,
        red 0 -50px 0 ,
        blue 50px -0px 0 ,
        yellow 0 50px 0 ,
        lime -50px 0 0
    ) ;
    background : #999 ;
    color : #fff ;
    height : 50px ;
    margin : 100px auto ;
    padding :40px ;
    text-align : center ;
    width : 50px ;
}

　　box-shadow混合器省去了厂商命名空间的工作，但是并没有带来多大好处，因此可以更进一步：

$shadow-1 : rgba (#000 , .5) -200px 0 0 ;
$shadow-2 : rgba (#000 , .4) -400px 0 0 ;
$shadow-3 : rgba (#000 , .3) -600px 0 0 ;
$shadow-4 : rgba (#000 , .2) -800px 0 0 ;

.motion {
    @include text-shadow ($shadow-1 , $shadow-2 , $shadow-3 , $shadow-4) ;
    font-size : 2em ;
    font-style : italic ;
    text-align : right ;
}

.skipping {
    @include text-shadow($shadow-2 , $shadow-4) ;
}

　　在这个例子中，我们再次把多重阴影运用在了两个元素上，但这次，有一个元素只使用了两个阴影。我们可以只定义一次阴影而将其多次传递给text-shadow混合器以达到重用的目的。在Compass中使用默认设置创建阴影：

$shadow-color : #ccc ;
$shadow-h : 5px ;
$shadow-v : 5px ;
$shadow-blur : 0 ;

$default-text-shadow-color : $shadow-color ;
$default-text-shadow-h-offset : $shadow-h ;
$default-text-shadow-v-offset : $shadow-v ;
$default-text-shadow-blur : $shadow-blur ;

$default-box-shadow-color : $shadow-color ;
$default-box-shadow-h-offset : $shadow-h ;
$default-box-shadow-v-offset : $shadow-v ;
$default-box-shadow-blur : $shadow-blur ;

h1 , h2 {font-family : sans-serif ;}

h1 {
    @include text-shadow ;
}

h2 {
    @include box-shadow ;
    @include single-text-shadow (#ddd , -1px , 1px) ;
    background : #999 ;
    padding : 1em ;
}

　　在原始代码里，这些重构并不会带来任何好处。而实际上，它的代码比原本的例子更长了。在做评判之前，让我们一步步分解来看。首先，我们通过一些Sass变量设置了几个共享的阴影设置。我们可以重用这些变量来设置Compass默认的text-shadow效果和box-shadow效果。现在我们不传递任何参数也可以调用这些混合器。并且，我们还可以通过single-text-shadow混合器传递我们希望覆盖的参数来添加其他文字阴影。

2.3 颜色渐变

　　如果你在使用border-radius、text-shadow和box-shadow的CSS3例子中看到，厂商命名空间是一个痛点。而在颜色渐变的支持上，Compass又做了哪些事呢？

　　用CSS3实现电视机测试图案：

#pattern {
    background : -webkit-gradient {
        linear , 360deg , 360deg ,
        color-stop(0% , #bfbfbf) ,
        color-stop(12.5% , #bfbfbf) ,
        color-stop(12.5% , #bfbf00) ,
        color-stop(25% , #bfbf00) ,
        color-stop(25% , #00bfbf) ,
        color-stop(37.5% , #00bfbf) ,
        color-stop(37.5% , #bfbf00) ,
        color-stop(37.5% , #00bf00) ,
        color-stop(50% , #00bf00) ,
        color-stop(50% , #bf00bf) ,
        color-stop(62.5% , #bf00bf) ,
        color-stop(62.5% , #bf0000) ,
        color-stop(75% , #bf0000) ,
        color-stop(75% , #0000bf) ,
        color-stop(87.5% , #0000bf) ,
        color-stop(87.5% , #000000) ,
        color-stop(100% , #000000) ) ;
    background : -webkit-linear-gradient(
        360deg ,
        #bfbfbf 0% , #bfbfbf 12.5% ,
        #bfbf00 12.5% , #bfbf00 25% ,
        #00bfbf 25% , #00bf00 37.5% ,
        #bfbf00 37.5% , #00bf00 37.5% ,
        #00bf00 50% , #bf00bf 50% ,
        #bf00bf 62.5% , #bf0000 62.5% ,
        #bf0000 75% , #0000bf 50% ,
        #0000bf 87.5% , #000000 87.5% ,
        #000000 100%) ;
    /* 省略-ms 、 -o、 -moz 各自版本的代码 */
    height : 300px ;
    margin : 100px auto ;
    width : 400px ;
    }
}            

　　我们来看一下Compass实现电视机测试图案：

#pattern {
    @include background (
    linear-gradient {
        360deg ,
        #bfbfbf 0% ,
        #bfbfbf 12.5% ,
        #bfbf00 12.5% ,
        #bfbf00 25% , 
        #00bfbf 25% ,
        #00bfbf 37.5% ,
        #bfbf00 37.5% ,
        #00bf00 37.5% ,
        #00bf00 50% ,
        #bf00bf 50% ,
        #bf00bf 62.5% ,
        #bf0000 62.5% , 
        #bf0000 75% ,
        #0000bf 75% ,
        #0000bf 87.5% ,
        #000 87.5% ,
        #000 100% ) ) ;
    height : 300px ;
    margin : 100px auto ;
    width : 400px ;
}

　　使用Compass，你只需要在样式表中写4行代码就能完成之前那段CSS所做的事情。通过Compass的CSS3模块中的background混合器，你就可以使用CSS3语法创建线性颜色渐变，并远离命名空间和旧版语法的困扰。

 3.通过CSS PIE支持IE

　　Compass 为那些不想放弃经典浏览器的用户提供了一个解决方式。CSS3 Progressive Internet Explorer, 或CSS3 PIE,是由一个Jason Johnston创建的项目,它针对低版本IE提供很多CSS3特性的polyfill。通过使用专属于低版本IE的HTC behavior,PIE提供了很多CSS3特性的完整或部分支持。包括：

　　Border-radius

　　Box-shadow

　　Border-image

　　多重背景图片

　　线性颜色渐变的背景图

.rounded{
    -moz-border-radius : 20px ;
    -webkit-border-radius : 20px ;
    -o-border-radius : 20px ;
    -ms-border-radius : 20px ;
    border-radius : 20px ;
}

.gradient {
    background : -webkit-gradient(
        linear , 50% 0% , 50% 100% ,
        color-stop(0% , #aaaaaa) ,
        color-stop(100% , #333333) ) ;
    background : -webkit-linear-gradient (#aaaaaa , #333333) ;
    background : -moz-linear-gradient (#aaaaaa , #333333) ;
    background : -o-linear-gradient (#aaaaaa , #333333) ;
    background : -ms-linear-gradient(#aaaaaa , #333333) ;
    -pie-background : linear-gradient(#aaaaaa , #333333) ;
    background : linear-gradient(#aaaaaa , #333333) ;
}

　　根据PIE文档，若想支持范围扩大到低版本IE，你需要做一些小的改动。首先，你需要为网站下载并添加HTC组件。完整的安装流程详见PIE网站。不过现在我们假设你已经把这个文件部署在了/stylesheets/PIE.htc上。接下来，你需要在样式表里添加一些额外的规则，如下代码：

　　用CSS3 PIE实现圆角和颜色渐变：

.rounded , .gradient {
    behavior : url("/stylesheets/PIE.htc") ;
    position : relative ;
}
...
.gradient {
    background : -webkit-gradient(
        linear , 50% 0% , 50% 100% ,
        color-stop(0% , #aaaaaa) ,
        color-stop(100% , #333333) ) ;
    background : -webkit-linear-gradient(#aaaaaa , #333333) ;
    background : -moz-linear-gradient(#aaaaaa , #333333) ;
    background : -o-linear-gradient(#aaaaaa , #333333) ;
    background : -ms-linear-gradient(#aaaaaa , #333333) ; 
    -pie-background : linear-gradient(#aaaaaa , #333333) ;
    background : linear-gradient(#aaaaaa , #333333) ;
}

　　为了让PIE介入，你需要应用相关的元素，再加上position : relative以修复IE的bug.接下来，为了实现颜色渐变，你需要使用一个非标准的CSS属性-pie-background以告诉PIE添加一个颜色渐变的背景。

　　这些工作在Compass里变得容易了。你可以通过命令在项目里引入PIE资源并展开一个有完善文档的示例样式表：

@import "compass/css3/pie" ;

.pie-element {
    //默认就是relative ，所以写relative是多余的，这里刻意说明一下。
    @include pie-element(relative);
}

.rounded {
    @include pie ;
    @include border-radius(20px) ;
}

.gradient {
    @include pie ;
    @include background (linear-gradient(#aaa , #333) ) ;
}