Sass 简介
Sass的 SCSS 语法是 CSS3 语法 的一个超集，传统的 CSS 重复的工作太多，而 Sass 可以帮助我们减少重复劳动，当然 Sass 的作用远不止这个。
参考和推荐书籍：《Sass 与 Compass 实战》
安装 Sass 和 Compass
一般的方法是通过gem进行安装，而gem又依赖于Ruby环境，所以要先安装Ruby，然后安装sass和compass。具体命令如下：
sudo apt-get install ruby
sudo gem install sass
sudo gem install compass
但是，用这种方法我最后一直安装不上compass，试了很多方法也没用。最后找到了以下这种方法，一次性安装，方便快捷：
sudo apt-get install ruby ruby-sass ruby-compass
检验是否安装成功，查看版本即可：
创建 Sass 文件
Sass 文件 是以 .scss 后缀的，然后通过 Sass 命令将 Sass 文件 转化为 css 文件 。命令为：
sass sass 文件 css 文件
Sass 基本语法
有 CSS 基础来学习 Sass 的 SCSS 语法很容易上手。
变量
Sass 允许定义变量，变量可以是任何的 CSS 属性值。如：颜色值、以空格分开的多个属性值等。
html
<div id="container"></div>
Sass
$color: #456eff;
$border: 2px solid black;
div#container {
width: 200px;
height: 200px;
margin: 10px auto;
background-color: $color;
border: $border;
}
编译后的 CSS 代码
/* line 17, ../sass/demo01.scss */
button.sprites-btn {
border: 1px solid silver;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
width: 400px;
height: 400px;
background: url('/images/icons-sf94510dbb1.png') 0 -400px;
}
细心的我们还可以观察到，通过 Sass 编译的 CSS 代码，还帮我们解决了厂商的命名问题（浏览器的兼容问题）。
结果
嵌套
通过嵌套，我们可以省去很多重复写父类名的工作等。
html
<div id="container">
<div id="box1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div id="box2">
<a href="javascript:">alink</a>
</div>
</div>
Sass
$color: #456eff;
$border: 2px solid black;
div#container {
width: 600px;
height: 600px;
margin: 10px auto;
background-color: $color;
border: $border;
div#box1{
width: 200px;
height: 200px;
background-color: silver;
ul{
list-style: none;
display: inline;
}
}
div#box2{
width: 200px;
height: 200px;
background-color: wheat;
margin: 10px;
a{
text-decoration: none;
}
}
}
编译后的 CSS 代码
div#container {
width: 600px;
height: 600px;
margin: 10px auto;
background-color: #456eff;
border: 2px solid black;
}
div#container div#box1 {
width: 200px;
height: 200px;
background-color: silver;
}
div#container div#box1 ul {
list-style: none;
display: inline;
}
div#container div#box2 {
width: 200px;
height: 200px;
background-color: wheat;
margin: 10px;
}
div#container div#box2 a {
text-decoration: none;
}
通过嵌套，通过编译会帮我们找到相关的嵌套关系，然后转化为相关的 CSS。
结果
父选择器的标识符 -- &
& 是父选择器的标识符，简单来说，就是在嵌套中代替父选择器。
下面代码实现对上面例子的最外层 div 的 hover 效果。只要在 div#container 中添加下面代码即可：
&:hover{
background-color: springgreen;
}
混合器 -- @mixin
混合器的作用：当你需要重复使用一个 CSS 代码段的时候，可以使用混合器减少重复代码。
定义混合器：
@maxin maxinName(params) { ... }
使用混合器：
{ @include maxinName(params) }
html
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
Sass
@mixin divBox {
height: 50px;
width: 50px;
background-color: rebeccapurple;
border: 1px solid silver;
border-radius: 50px;
margin: 10px;
}
div#box1, div#box2, div#box3{
@include divBox;
}
编译后的 CSS 代码
div#box1,
div#box2,
div#box3 {
height: 50px;
width: 50px;
background-color: rebeccapurple;
border: 1px solid silver;
border-radius: 40px;
margin: 10px;
}
效果
混合器同时也可以传递相关的参数，形参是变量形式，实参是具体的属性。如：
@mixin border($size, $color){ ... }
{ @include border(1px, blue) }
或者
{ @include border($size: 1px, $color: blue) }
继承 -- @extend
继承是基于类的，所以子类继承父类，子类就会拥有父类的所有相关属性。简单理解，就是出现父类名的地方，子类也会出现。
html
<div class="box1">
box1
<div class="box2">
box2
</div>
</div>
<div class="box3">
box3
<div class="box2">
box2
</div>
</div>
Sass
.box1 {
width: 200px;
height: 200px;
background-color: silver;
padding: 10px;
.box2{
width: 100px;
height: 100px;
background-color: blue;
}
}
.box3{
@extend .box1;
}
编译后的 CSS 代码
.box1,
.box3 {
width: 200px;
height: 200px;
background-color: silver;
padding: 10px;
}
.box1 .box2,
.box3 .box2 {
width: 100px;
height: 100px;
background-color: blue;
}
观察编译后的 CSS 代码，父类有的包括父类的属性，父类的子类属性，该有的都有。
效果
注释
主要有两种方法：
// .........
/* ......... */
导入其他的 Sass 文件
实现方法为：
@import ”文件名“
导入的文件可以不写后缀名，这个Vue一样。然后通过 Sass 编译的时候就会寻找相关的依赖文件，最后转化为一个 CSS 文件。
Compass 简介
Compass 是一个强大的 Sass 框架， 是一套实用的工具。Compass 自身有很多 Sass 混合器和函数构成的模块，这些模块在它的官网都有详细的介绍。http://compass-style.org/
创建 Compass 文件
默认的创建方式为:
compass create project
创建成功：
文件目录：
默认会创建存放sass 文件的文件夹，和存放css 文件的文件夹，还有一个配置文件。
编译 Compass 文件
在文件夹中，通过编译命令，即可完成编译工作：
compass compile
Compass 与 CSS3
Compass 在 CSS3 中起着非常大的作用。比如解决浏览器的兼容性前缀问题。
解决前缀问题
导入 Compass CSS3 支持
@import "compass/css3"
圆角
@include border-radius(10px);
阴影
盒子阴影：
@include box-shawdow(10px 10px 10px rgba(125, 125, 125, .8));
文字阴影：
@include text-shawdow(10px 10px 10px rgba(125, 125, 125, .8));
颜色渐变
可以简写颜色渐变：
@include backgroud(linear-fradient(360deg, 颜色变化));
Compass 与 精灵图/雪碧图
可以通过 Compass 将图片合成精灵图，不仅如此，还可以生成精灵图的 CSS 文件， CSS 文件文件中包含精灵图中的相关位置信息。使用的时候还可以设置相关的属性值。个人觉得这个十分强大～～
目录说明
首先，你得在项目在根目录下新建一个 images 文件夹， 然后在 images 文件夹中新建一个 icons 文件夹, 即： /images/icons/ 。icons 文件夹的名字你可以随便起。
创建一个精灵地图
@import "compass/utilities/sprites";
@import "icons/*.png";
@include all-icons-sprites; // 生成 CSS 文件，文件包含精灵的位置信息。
通过以上两个语法，编译的时候就会在你的 images 文件夹中生成一张精灵图。
嗯～很强！！精灵图的相关配置暂时不总结了，在相关书籍和官网上都有很多详细的介绍。
