// 内容概要
// 开始学习Sass和动态样式表
// 用Sass更高效地写样式表
// Compass简介
// 用Compass迎接工程实践中的样式挑战
1 声明变量:<strong>$blue:#1875e7</strong>;2 调用变量:.blue { color:<strong>$blue</strong>; }
1 ul{2 float:right;3 li {4 float:left;5 a{ color:#111; }6 }7 }
1 <strong>@mixin list</strong> { 2 li { 3 float:left; 4 margin-right:10px; 5 } 6 } 7 ul { 8 <strong> @include list</strong>; 9 }10 11 // 在混合器中应用变量12 @mixin list(<strong>$spacing:10px</strong>) { 13 li {14 float:left;15 margin-right:<strong>$spacing</strong>;16 }17 }
1 .error { 2 border:1px #f00; 3 background:#fdd; 4 } 5 .bacError { 6 <strong> @extend .error; // 继承选择器里的内容 </strong> 7 border-width:3px; 8 } 9 10 //<strong> 在选择器中使用占位选择器</strong>11 Sass:12 %button-reset { <strong>// 占位选择器; </strong>13 margin:0;14 padding:.5em 1.2em;15 }16 .save {17 <strong>@extend %button-reset; // 继承占位选择器里的内容; </strong>18 color:white;19 }20 .delete {21 <strong>@extend %button-reset; </strong>22 color:black;23 }24 CSS:25 .save,.delete {26 margin:0;27 padding:.5em 1.2em;28 }
// Compass是一个强大的Sass框架,它的设计目标是顺畅、高效地装扮互联网,使用它的人可写出可维护性更高的样式表;
// 确保电脑已经安装Ruby环境,并且安装了Sass和Compass
1 $ <strong>compass create sample</strong>
// 接下来将通过使用Compass的内置模块(Sass的函数和其他特性组合而成)来实现CSS重置、网格布局、表格格式化和CSS3的一些特性;
1 (1).<strong>@import "compass/reset"</strong>2 //<strong> 通过Sass引入命令@import引入Compass的重置模块;</strong>3 // reset模块是<strong>Compass框架中独立的一部分</strong>,<strong>可被随意引用到项目中;</strong>4 // 通过加入这行代码,<strong>生成的CSS文件中就会包含CSS重置部分的代码;</strong>5 6 (2).<strong>@include reset-html5 </strong>7 // 输出文件中会<strong>生成额外的CSS规则来对HTML5的元素进行基本的样式修改</strong>,
1 $ compass create my_grid --using blueprint2 // 创建的my_grid工程里,<strong>screen.scss文件内容会添加一系列基本布局的样式在里边;</strong>3 // 而且不必在HTML标签添加"span-*"的类名,而是使用Sass的column混合器;4 <strong>@include column($sidebar-columns); </strong>5 // 详细内容见第六章;
1 @import "compass/utilities/tables";2 table {3 $table-color:#666; // 定义变量;4 @include table-scaffolding; // 引入混合器;<strong>提供最基本的样式修饰</strong>;5 @include inner-table-borders(1px, darken($table-color,40%));//<strong> 添加单元格边框</strong>;6 @include outer-table-borders(2px); //<strong> 添加表格边框</strong>;7 @include alternating-rows-and-columns($table-color,adjust-hue($table-color,-120deg),#222); //<strong> 添加斑马条纹样式</strong>;8 }
1 <strong>@import "compass/css3"</strong> 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 }
//我们学习了CSS预处理的示例,并简单介绍了一下Sass的4个关键特性:变量、选择器嵌套、混合器和选择器继承。
//同时,我们也了解了一些Compass框架中Sass特性在真实世界程序中的应用,包括CSS重置、格式布局、表格样式修饰以及CSS3边框圆角。
// 内容概要
// 通过变量重用颜色、长度以及其他一些值
// 通过规则嵌套让CSS更加结构化
// 通过多文件组织让样式变得更加可维护
// 通过混合器和继承重用整个样式
// Sass使用$符号来标识变量
1 $nav-color:#abc; //<strong> 外部变量</strong>;2 nav {3 $width:100px; //<strong> 内部变量;</strong>4 width:$width;5 color:$nav-color;6 }
1 //<strong> 当声明变量时,变量值也可以引用其他变量;</strong>2 $highlight-color:#abc;3 $highlight-border:1px $highlight-color solid;4 .seleted { border:$highlight-border; }
1 #content {2 article {3 h1 {color:#333;}4 p {margin:1em;}5 }6 }
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 }
1 .container {2 h1,h2,h3 {margin-bottom:2em;}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;}
1 nav {2 border: { // <strong>将属性拆开; </strong>3 style:solid;4 width:1px;5 color:#ccc;6 }7 }
// Sass的@import规则在生成CSS文件时就把相关文件导入进来;
// 所有相关的样式被归纳到了同一个CSS文件中,而无需发起额外的下载请求;
// 所有在被导入文件中定义的变量和混合器均可在导入文件中使用;
1 //<strong> Sass局部文件的文件名以下划线开头</strong>。这样,Sass就不会在编译时单独编译这个文件输出CSS,而只把这个文件用作导入;2 <strong>@import "themes/night-sky";</strong>
1 // !default : 如果这个变量被声明赋值了,那就用它声明的值,否则就用这个默认值。2 $box-width:400px !default; // 如果变量"$box-width"之前没有被赋值,则使用"400px";3 .box {4 width:$box-width;5 }
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; } }
// 1.被导入的文件的名字以.css结尾;
// 2.被导入的文件的名字是一个URL地址;
// 3.被导入的文件的名字是CSS的url()值;
// 这种注释内容不会出现在生成的css文件中
/* 这种注释内容会出现在生成的css文件中 */
1 //<strong> 混合器使用@mixin标识符定义;</strong> 2 //<strong> 这个标识符给一段样式赋予一个名字</strong>,<strong>这样就可以通过"@include"引用这个名字重用这段样式</strong>; 3 //<strong> @include调用会把混合器中的所有样式提取出来放在@include被调用的地方</strong>; 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 }
1 // 判断一组属性是否应该合成一个混合器;一条经验法则就是能否为这个混合器想出一个合理的名字;2 // 混合器和CSS类的区别:3 // 1.<strong>类名在HTML文件中应用;具有语义化;</strong>4 // 2.<strong>混合器是在样式表中应用的;具有展示性;</strong>
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 }
1 Sass: 2 @mixin link-colors(<strong>$normal,$hover,$visited</strong>){ 3 color:$normal; 4 &:hover { color:<strong>$hover;</strong> } 5 &:visited { color:<strong>$visited;</strong> } 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;}
1 @mixin link-colors ($normal,<strong>$hover:$normal</strong>,<strong>$visited:$normal</strong>){2 color:$normal;3 &:hover { color:$hover; }4 &:visited { color:$visited; }5 }
1 Sass: 2 .error { 3 border:1px solid red; 4 } 5 .seriousError { 6 @extend .error; // <strong>继承选择器中的内容</strong>; 7 border-width:3px; 8 } 9 CSS:10 .seriousError {11 border:1px solid red;12 border-width:3px;13 }
// 继承是基于类的(有时是基于其他类型的选择器),所以继承应该是建立在语义化的关系上;
// 如果一条样式规则继承了一个复杂的选择器,那么它只会继承这个复杂选择器命中的元素所应用的样式;
1 // 继承不是仅仅用CSS样式替换@extend处的代码那么简单;2 // >1.<strong>跟混合器相比,继承生成的CSS代码相对更少</strong>;3 // >2.<strong>继承遵从CSS层叠的规则;(权重和出现的先后顺序)</strong>;
// 使用继承会让你的CSS美观/整洁;因为继承只会在生成CSS时复制选择器,而不会复制大段的CSS属性;
1 // 1.变量是Sass提供的最基本的工具; 3 //<strong> 通过变量可以让独立的CSS值变得可复用</strong>;无论是在一条单独的规则范围内还是在整个样式表中; 5 // 变量/混合器的命名甚至Sass的文件名,可以互换通用"_"和"-"; 6 7 // 2.<strong>嵌套允许CSS规则内嵌套CSS规则</strong>,减少重复编写常用的选择器,同样让样式表的结构更清晰; 9 // 同时提供了特殊的父选择器标识符"&",从而构造更高效的嵌套;10 11 // 3.<strong>通过样式导入可以把分散在多个Sass文件中的内容合并在生成的一个CSS文件</strong>,避免了项目中有大量的CSS文件通过原生的CSS@import带来的性能问题;12 13 // 4.混合器允许用户编写语义化样式的同时避免视觉层面上样式的重复;14 15 // 5.继承允许声明类之间语义化的关系,通过这些关系可以保持CSS的整洁和可维护性;