概要:第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 :;
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) ) ;
}

Sass与Compress实战:第五章的更多相关文章

  1. Sass与Compress实战:第二章

    1.使用变量 Sass使用$符号来标识变量,比如$highlight-color. 1.1声明变量 Sass声明变量和CSS声明属性很像: $highlight-color : #abcdef; 这意 ...

  2. Sass与Compress实战:第一章

    1.消除冗余代码的方式: ▶通过变量来复用属性值 例如,一段冗余的CSS代码: h1#brand { color : #1875e7 } #sidebar { background-color : # ...

  3. Spring实战第五章学习笔记————构建Spring Web应用程序

    Spring实战第五章学习笔记----构建Spring Web应用程序 Spring MVC基于模型-视图-控制器(Model-View-Controller)模式实现,它能够构建像Spring框架那 ...

  4. RxJava2实战---第五章 变换操作符和过滤操作符

    RxJava2实战---第五章 变换操作符和过滤操作符 RxJava的变换操作符主要包括以下几种: map():对序列的每一项都用一个函数来变换Observable发射的数据序列. flatMap() ...

  5. 2017.2.28 activiti实战--第五章--用户与组及部署管理(三)部署流程及资源读取

    学习资料:<Activiti实战> 第五章 用户与组及部署管理(三)部署流程及资源读取 内容概览:如何利用API读取已经部署的资源,比如读取流程定义的XML文件,或流程对应的图片文件. 以 ...

  6. 2017.2.28 activiti实战--第五章--用户与组及部署管理(二)部署流程资源

    学习资料:<Activiti实战> 第五章 用户与组及部署管理(二)部署流程资源 内容概览:讲解流程资源的读取与部署. 5.2 部署流程资源 5.2.1 流程资源 流程资源常用的有以下几种 ...

  7. 2017.2.20 activiti实战--第五章--用户与组及部署管理(一)用户与组

    学习资料:<Activiti实战> 第五章 用户与组及部署管理(一)用户与组 内容概览:讲解activiti中内置的一套用户.组的关系,以及如何通过API添加.删除.查询. 5.1 用户与 ...

  8. Sass与Compress实战:第七章

    概要:将介绍Compass如何让你从本地开发原型轻松转移到生产环境的网址或Web应用中. 本章内容: ● 生成资源URL的最佳实践 ● 撰写无需Web服务器的样式表 ● 在浏览器中进行设计的技巧 ● ...

  9. Sass与Compress实战:第六章

    概要:介绍Compass如何让你从本地开发原型轻松转移到正产环境的网址或Web应用中. 本章内容: ● CSS精灵的历史和基本原则 ● Compass混合器让精灵自动化 ● 自定义精灵图片和CSS输出 ...

随机推荐

  1. linux面试题集锦2《转》

    一.填空题: 1. 在Linux系统中,以 文件 方式访问设备 . 2. Linux内核引导时,从文件 /etc/fstab 中读取要加载的文件系统. 3. Linux文件系统中每个文件用 索引节点来 ...

  2. 【C#】Deep copy of objects

    If you learned C++ carefully, you must have known something about the copy of object. For example, I ...

  3. 话说Angularjs的$resource模块

    上一篇中讲到使用$http同服务器进行通信,但是功能上比较简单,AngularJS还提供了另外一个可选的服务$resource,使用它可以非常方便的同支持restful的服务单进行数据交互. 安装 n ...

  4. CoreJavaE10V1P3.10 第3章 Java的基本编程结构-3.10 数组(Arrays)

    数组是存储同一类型数据的数据结构 数组的声明与初始化 int[] a; int a[]; int[] a = new int[100]; int[] a = new int[100]; for (in ...

  5. python绝技 — 使用PyGeoIP关联IP地址和物理位置

    准备工作 要关联IP与物理位置,我们需要有一个包含这样对应关系的数据库. 我们可以使用开源数据库GeoLiteCity,它能够较为准确地把IP地址与所在城市关联起来 下载地址:http://dev.m ...

  6. mysql 5.5 mysqldump备份原理

    开启general_log日志,获取mysqldump执行语句 show VARIABLES like 'general_log%' set GLOBAL general_log=on 执行备份命令 ...

  7. Apache server for win解压版的安装与配置

    下载地址: Apache 2.4.16 Win64位:VC14:http://www.apachelounge.com/download/VC14/binaries/httpd-2.4.16-win6 ...

  8. Nuget 学习二

    打包自己的类库 准备工作: 1)nuget 账号: https://www.nuget.org/ 2)nuget 包管理器 点击下载:NuGetPackageExplorer,安装完应该是酱紫. 开始 ...

  9. Scala Singleton对象

    Scala Object: scala没有静态的修饰符,例如Java中的static.但是Scala提供了Object类型,object下的成员都是静态的,比较像Java的静态类.不同在于Scala的 ...

  10. mysql连接失败或出现“Too many connections”错误

    mysql连接失败或出现"Too many connections"错误 # 按自己服务器的配置文件路径修改 vi /etc/my.cnf 查找:max_connections 修 ...