(一)认识Sass和Compass

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

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

1.2.1 通过变量来复用属性值

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

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

ul{
    float:right;
    li {
        float:left;
        a{ color:#111; }
    }
}

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

@mixin list {
    li {
        float:left;
        margin-right:10px;
    }
}
ul {
    @include list;
}

// 在混合器中应用变量
@mixin list($spacing:10px) {　　
    li {
        float:left;
        margin-right:$spacing;
    }
}

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

.error {
    border:1px #f00;
    background:#fdd;
}
.bacError {
    @extend .error;　　　　// 继承选择器里的内容
    border-width:3px;
}

// 在选择器中使用占位选择器
Sass:
    %button-reset {　　　　// 占位选择器;
        margin:0;
        padding:.5em 1.2em;
    }
    .save {
        @extend %button-reset;　　// 继承占位选择器里的内容;
        color:white;
    }
    .delete {
        @extend %button-reset;
        color:black;
    }
CSS:
    .save,.delete {
        margin:0;
        padding:.5em 1.2em;
    }

 1.3 Compass是什么

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

1.4 创建一个Compass项目

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

$ compass create sample

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

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

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

(1).@import "compass/reset"
// 通过Sass引入命令@import引入Compass的重置模块;
// reset模块是Compass框架中独立的一部分,可被随意引用到项目中;
// 通过加入这行代码,生成的CSS文件中就会包含CSS重置部分的代码;

(2).@include reset-html5
// 输出文件中会生成额外的CSS规则来对HTML5的元素进行基本的样式修改,

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

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

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

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

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

@import "compass/css3"
Sass:
    .rounded {
        @include border-radius(5px);
    }
CSS:
    .rounded {
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -o-border-radius: 5px;
        -ms-border-radius: 5px;
        border-radius: 5px;
    }

 1.6 小结

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

 

 第二章 Sass基本语法

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

 2.1 使用变量

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

 2.1.1 变量声明

$nav-color:#abc;            // 外部变量;
nav {
    $width:100px;           // 内部变量;
    width:$width;
    color:$nav-color;
}

 2.1.2 变量引用

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

 2.2 嵌套CSS规则

#content {
    article {
        h1 {color:#333;}
        p {margin:1em;}
    }
}

 2.2.1 父选择器的标识符&

Sass:
    a {
        color:blue;
        &:hover {color:red;}
    }
CSS:
    a {
        color:blue;
    }
    a:hover {
        color:red;
    }

 2.2.2 群组选择器的嵌套

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

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

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

 2.2.4 嵌套属性

nav {
    border: {　　　　　　// 将属性拆开;
        style:solid;
        width:1px;
        color:#ccc;
    }
}

 2.3 导入Sass文件

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

 2.3.1 使用Sass部分文件

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

2.3.2 默认值设置

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

2.3.3 嵌套导入

Sass:
_blue-theme.scss:
    aside{
        color:white;
    }

    .blue-theme { @import "blue-theme" }　　// 引入_blue-theme.scss文件;
CSS:
    .blue-theme { 
　　　　　　aside { color:white; }
　　　　}

2.3.4 原生的CSS导入

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

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

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

2.4 静默注释

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

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

2.5 混合器

// 混合器使用@mixin标识符定义;
// 这个标识符给一段样式赋予一个名字,这样就可以通过"@include"引用这个名字重用这段样式;
// @include调用会把混合器中的所有样式提取出来放在@include被调用的地方;
Sass:
    @mixin rounded {
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
    }
    .notice {
        @include rounded;
    }
CSS:
    .notice {
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
    }

2.5.1 何时使用混合器

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

2.5.2 混合器中的CSS规则

// 当一个包含CSS规则的混合器通过@include包含在一个父规则中时,在混合器中的规则最终会生成父规则中的嵌套规则;
Sass:
    @mixin no-bullets {
        list-style:none;
        li {
            list-style-type:none;
            margin-left:0px;
        }
    }
    ul {
        color:#333;
        @include no-bullets;
    }
CSS:
    ul {
        color:#333;
        list-style:none;　　　　// 混合器中的属性;
    }
    ul li {
        list-style-type:none;
        margin-left:0px;
    }

2.5.3 给混合器传参

Sass:
    @mixin link-colors($normal,$hover,$visited){
        color:$normal;
        &:hover { color:$hover; }
        &:visited { color:$visited; }
    }
    a {
        @include link-colors(blue,red,green);
    }
    Or
    a {
        @include link-colors(
            $normal:blue,
            $visited:green;
            $hover:red
        );
    }
CSS:
    a { color:blue; }
    a:hover { color:red; }
    a:visited { color:green;}

2.5.4 默认参数值

@mixin link-colors ($normal,$hover:$normal,$visited:$normal){
    color:$normal;
    &:hover { color:$hover; }
    &:visited { color:$visited; }
}

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

Sass:
    .error {
        border:1px solid red;
    }
    .seriousError {
        @extend .error;　　　　　　// 继承选择器中的内容;
        border-width:3px;
    }
CSS:
    .seriousError {
        border:1px solid red;
        border-width:3px;
    }

2.6.1 何时使用继承

// 继承是基于类的(有时是基于其他类型的选择器),所以继承应该是建立在语义化的关系上;

2.6.2 继承的高级用法 

// 如果一条样式规则继承了一个复杂的选择器,那么它只会继承这个复杂选择器命中的元素所应用的样式;

2.6.3 继承的工作细节

// 继承不是仅仅用CSS样式替换@extend处的代码那么简单;
// >1.跟混合器相比,继承生成的CSS代码相对更少;
// >2.继承遵从CSS层叠的规则;(权重和出现的先后顺序);

2.6.4 使用继承的最佳实践

// 使用继承会让你的CSS美观/整洁;因为继承只会在生成CSS时复制选择器,而不会复制大段的CSS属性;

2.7 小结

// 1.变量是Sass提供的最基本的工具;
// 通过变量可以让独立的CSS值变得可复用;无论是在一条单独的规则范围内还是在整个样式表中;
// 变量/混合器的命名甚至Sass的文件名,可以互换通用"_"和"-";

// 2.嵌套允许CSS规则内嵌套CSS规则,减少重复编写常用的选择器,同样让样式表的结构更清晰;
// 同时提供了特殊的父选择器标识符"&",从而构造更高效的嵌套;

// 3.通过样式导入可以把分散在多个Sass文件中的内容合并在生成的一个CSS文件,避免了项目中有大量的CSS文件通过原生的CSS@import带来的性能问题;

// 4.混合器允许用户编写语义化样式的同时避免视觉层面上样式的重复；

// 5.继承允许声明类之间语义化的关系,通过这些关系可以保持CSS的整洁和可维护性;