(一)认识Sass和Compass

第一章 Sass和Compass让样式表重焕青春

// 内容概要// 开始学习Sass和动态样式表// 用Sass更高效地写样式表// Compass简介// 用Compass迎接工程实践中的样式挑战

1.2.1 通过变量来复用属性值

1 声明变量:$blue:#1875e7;2 调用变量:.blue { color:$blue; }

1.2.2 通过嵌套来快速写出多层级的选择器

1 ul{2     float:right;3     li {4         float:left;5         a{ color:#111; }6     }7 }

1.2.3 使用混合器来复用一段样式

 1 @mixin list { 2     li { 3         float:left; 4         margin-right:10px; 5     } 6 } 7 ul { 8     @include list; 9 }10 11 // 在混合器中应用变量12 @mixin list($spacing:10px) {　　13     li {14         float:left;15         margin-right:$spacing;16     }17 }

1.2.4 使用选择器继承来避免重复属性

 1 .error { 2     border:1px #f00; 3     background:#fdd; 4 } 5 .bacError { 6     @extend .error;　　　　// 继承选择器里的内容 7     border-width:3px; 8 } 9 10 // 在选择器中使用占位选择器11 Sass:12     %button-reset {　　　　// 占位选择器;13         margin:0;14         padding:.5em 1.2em;15     }16     .save {17         @extend %button-reset;　　// 继承占位选择器里的内容;18         color:white;19     }20     .delete {21         @extend %button-reset;22         color:black;23     }24 CSS:25     .save,.delete {26         margin:0;27         padding:.5em 1.2em;28     }

1.3 Compass是什么

// Compass是一个强大的Sass框架,它的设计目标是顺畅、高效地装扮互联网,使用它的人可写出可维护性更高的样式表;

1.4 创建一个Compass项目

// 确保电脑已经安装Ruby环境，并且安装了Sass和Compass

1 $ compass create sample

1.5 使用Compass解决真实的CSS问题

// 接下来将通过使用Compass的内置模块(Sass的函数和其他特性组合而成)来实现CSS重置、网格布局、表格格式化和CSS3的一些特性;

1.5.1 通过重置来保持样式表现一致

1 (1).@import "compass/reset"2 // 通过Sass引入命令@import引入Compass的重置模块;3 // reset模块是Compass框架中独立的一部分,可被随意引用到项目中;4 // 通过加入这行代码,生成的CSS文件中就会包含CSS重置部分的代码;5 6 (2).@include reset-html57 // 输出文件中会生成额外的CSS规则来对HTML5的元素进行基本的样式修改,

1.5.2 引入基本布局--BluePRint网格布局

1 $ compass create my_grid --using blueprint2 // 创建的my_grid工程里,screen.scss文件内容会添加一系列基本布局的样式在里边;3 // 而且不必在HTML标签添加"span-*"的类名,而是使用Sass的column混合器;4 @include column($sidebar-columns);5 // 详细内容见第六章;

1.5.3 通过表格辅助器为表格添加更加专业的斑马条纹样式

1 @import "compass/utilities/tables";2 table {3     $table-color:#666;                                          // 定义变量;4     @include table-scaffolding;                                 // 引入混合器;提供最基本的样式修饰;5     @include inner-table-borders(1px, darken($table-color,40%));// 添加单元格边框;6     @include outer-table-borders(2px);                          // 添加表格边框;7     @include alternating-rows-and-columns($table-color,adjust-hue($table-color,-120deg),#222);  // 添加斑马条纹样式;8 }

1.5.4 CSS3属性无需再写厂商前缀

 1 @import "compass/css3" 2 Sass: 3     .rounded { 4         @include border-radius(5px); 5     } 6 CSS: 7     .rounded { 8         -moz-border-radius: 5px; 9         -webkit-border-radius: 5px;10         -o-border-radius: 5px;11         -ms-border-radius: 5px;12         border-radius: 5px;13     }

1.6 小结

//我们学习了CSS预处理的示例,并简单介绍了一下Sass的4个关键特性：变量、选择器嵌套、混合器和选择器继承。//同时,我们也了解了一些Compass框架中Sass特性在真实世界程序中的应用,包括CSS重置、格式布局、表格样式修饰以及CSS3边框圆角。

第二章 Sass基本语法

// 内容概要// 通过变量重用颜色、长度以及其他一些值// 通过规则嵌套让CSS更加结构化// 通过多文件组织让样式变得更加可维护// 通过混合器和继承重用整个样式

2.1 使用变量

// Sass使用$符号来标识变量

2.1.1 变量声明

1 $nav-color:#abc;            // 外部变量;2 nav {3     $width:100px;           // 内部变量;4     width:$width;5     color:$nav-color;6 }

2.1.2 变量引用

1 // 当声明变量时,变量值也可以引用其他变量;2 $highlight-color:#abc;3 $highlight-border:1px $highlight-color solid;4 .seleted { border:$highlight-border; }

2.2 嵌套CSS规则

1 #content {2     article {3         h1 {color:#333;}4         p {margin:1em;}5     }6 }

2.2.1 父选择器的标识符&

 1 Sass: 2     a { 3         color:blue; 4         &:hover {color:red;} 5     } 6 CSS: 7     a { 8         color:blue; 9     }10     a:hover {11         color:red;12     }

2.2.2 群组选择器的嵌套

1 .container {2     h1,h2,h3 {margin-bottom:2em;}3 }

2.2.3 子组合选择器和同层组合选择器:>、+、~

1 // 选择器只会选择article下紧跟着的子元素中命中section选择器的元素;2 article > section {border:1px solid #ccc;}3 // 选择header元素后紧跟的p元素;4 header+p {font-size:1.1em;}5 // 选择所有跟在article后的同层article元素;6 article ~ article {border:none;}

2.2.4 嵌套属性

1 nav {2     border: {　　　　　　// 将属性拆开;3         style:solid;4         width:1px;5         color:#ccc;6     }7 }

2.3 导入Sass文件

// Sass的@import规则在生成CSS文件时就把相关文件导入进来;// 所有相关的样式被归纳到了同一个CSS文件中,而无需发起额外的下载请求;// 所有在被导入文件中定义的变量和混合器均可在导入文件中使用;

2.3.1 使用Sass部分文件

1 // Sass局部文件的文件名以下划线开头。这样,Sass就不会在编译时单独编译这个文件输出CSS,而只把这个文件用作导入;2 @import "themes/night-sky";

2.3.2 默认值设置

1 // !default : 如果这个变量被声明赋值了,那就用它声明的值,否则就用这个默认值。2 $box-width:400px !default;      // 如果变量"$box-width"之前没有被赋值,则使用"400px";3 .box {4     width:$box-width;5 }

2.3.3 嵌套导入

1 Sass:2 _blue-theme.scss:3     aside{4         color:white;5     }6     .blue-theme { @import "blue-theme" }　　// 引入_blue-theme.scss文件;7 CSS:8     .blue-theme { 　　　　　　aside { color:white; }　　　　}

2.3.4 原生的CSS导入

// 1.被导入的文件的名字以.css结尾;

// 2.被导入的文件的名字是一个URL地址;

// 3.被导入的文件的名字是CSS的url()值;

2.4 静默注释

// 这种注释内容不会出现在生成的css文件中

/* 这种注释内容会出现在生成的css文件中 */

2.5 混合器

 1 // 混合器使用@mixin标识符定义; 2 // 这个标识符给一段样式赋予一个名字,这样就可以通过"@include"引用这个名字重用这段样式; 3 // @include调用会把混合器中的所有样式提取出来放在@include被调用的地方; 4 Sass: 5     @mixin rounded { 6         -moz-border-radius:5px; 7         -webkit-border-radius:5px; 8         border-radius:5px; 9     }10     .notice {11         @include rounded;12     }13 CSS:14     .notice {15         -moz-border-radius:5px;16         -webkit-border-radius:5px;17         border-radius:5px;18     }

2.5.1 何时使用混合器

1 // 判断一组属性是否应该合成一个混合器;一条经验法则就是能否为这个混合器想出一个合理的名字;2 // 混合器和CSS类的区别:3 // 1.类名在HTML文件中应用;具有语义化;4 // 2.混合器是在样式表中应用的;具有展示性;

2.5.2 混合器中的CSS规则

 1 // 当一个包含CSS规则的混合器通过@include包含在一个父规则中时,在混合器中的规则最终会生成父规则中的嵌套规则; 2 Sass: 3     @mixin no-bullets { 4         list-style:none; 5         li { 6             list-style-type:none; 7             margin-left:0px; 8         } 9     }10     ul {11         color:#333;12         @include no-bullets;13     }14 CSS:15     ul {16         color:#333;17         list-style:none;　　　　// 混合器中的属性;18     }19     ul li {20         list-style-type:none;21         margin-left:0px;22     }

2.5.3 给混合器传参

 1 Sass: 2     @mixin link-colors($normal,$hover,$visited){ 3         color:$normal; 4         &:hover { color:$hover; } 5         &:visited { color:$visited; } 6     } 7     a { 8         @include link-colors(blue,red,green); 9     }10     Or11     a {12         @include link-colors(13             $normal:blue,14             $visited:green;15             $hover:red16         );17     }18 CSS:19     a { color:blue; }20     a:hover { color:red; }21     a:visited { color:green;}

2.5.4 默认参数值

1 @mixin link-colors ($normal,$hover:$normal,$visited:$normal){2     color:$normal;3     &:hover { color:$hover; }4     &:visited { color:$visited; }5 }

2.6 使用选择器继承来精简CSS

 1 Sass: 2     .error { 3         border:1px solid red; 4     } 5     .seriousError { 6         @extend .err