Sass与Compress实战：第五章

Posted 2020-07-20

概要：第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混合器都可以被应用为多重阴影。