一，CSS 预处理器
CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数
$color: red;
.test {
color: $color;
}
如上使用了变量$color
二，Sass
Sass 是采用 **Ruby **语言编写的一款 CSS 预处理语言，它诞生于2007年，是最大的成熟的 CSS 预处理语言。最初它是为了配合 HAML
三，Sass 和 SCSS 有什么区别？
Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：
文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
四，SCSS语法格式
SCSS 是 Sass 的新语法格式，从外形上来判断他和 CSS 长得几乎是一模一样，代码都包裹在一对大括号里，并且末尾结束处都有一个分号。其文件名格式常常以“.scss”为扩展名
同样的这段 CSS 代码：
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
我们使用 SCSS 语法格式将按下面这样来书写：
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
五，Sass 编译
在项目中还是引用“.css”文件，Sass 只不过是做为一个预处理工具，提前帮你做事情，只有你需要时候，他才有攻效。因为 Sass 开发之后，要让 Web 页面能调用 Sass 写好的东西，就得有这么一个过程，这个过程就称之为 Sass 编译过程。
[Sass]命令编译
命令编译是指使用你电脑中的命令终端，通过输入 Sass 指令来编译 Sass。这种编译方式是最直接也是最简单的一种方式。因为只需要在你的命令终端输入
sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
watch 举例：
来看一个简单的示例，假设我本地有一个项目，我要把项目中“bootstrap.scss”编译出“bootstrap.css”文件，并且将编译出来的文件放在“css”文件夹中，我就可以在我的命令终端中执行：
sass --watch sass/bootstrap.scss:css/bootstrap.css
一旦我的 bootstrap.scss 文件有任何修改，只要我重新保存了修改的文件，命令终端就能监测，并重新编译出文件：
六，[Sass]声明变量
如果值后面加上!default则表示默认值。
sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
line-height: $baseLineHeight;
}
编译后的css代码：
body{
line-height:2;
}
六，[Sass]局部变量和全局变量
一个例子说明一切
//SCSS
$color: orange !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量).
block {
color: $color;//调用全局变量
}
em {
$color: red;//定义局部变量
a { color: $color;//调用局部变量 }
}
span { color: $color;//调用全局变量}
什么时候声明变量？
1, 该值至少重复出现了两次；
2, 该值至少可能会被更新一次；
3, 该值所有的表现都与变量有关（非巧合）。
七，[Sass]嵌套
Sass 的嵌套分为三种：
- 选择器嵌套
- 属性嵌套
- 伪类嵌套
1、选择器嵌套
1、选择器嵌套
假设我们有一段这样的结构：
<header>
<nav>
<a href=“##”>Home</a>
<a href=“##”>About</a>
<a href=“##”>Blog</a>
</nav>
<header>
想选中 header 中的 a 标签，在写 CSS 会这样写：
nav a {
color:red;
}
header nav a {
color:green;
}
那么在 Sass 中，就可以使用选择器的嵌套来实现：
nav {
a {
color: red;
header & {
color:green;
}
}
}
2,属性嵌套
Sass 中还提供属性嵌套，CSS 有一些属性前缀相同，只是后缀不一样，比如：border-top/border-right，与这个类似的还有 margin、padding、font 等属性。假设你的样式中用到了：
.box {
border-top: 1px solid red;
border-bottom: 1px solid green;
}
在 Sass 中我们可以这样写：
.box {
border: {
top: 1px solid red;
bottom: 1px solid green;
}
}
3,伪类嵌套
其实伪类嵌套和属性嵌套非常类似，只不过他需要借助&符号一起配合使用。我们就拿经典的“clearfix”为例吧：
.clearfix{
&:before,&:after
{
content:"";
display: table;
}
&:after
{ clear:both; overflow: hidden; }
}
编译出来的 CSS：
clearfix:before, .clearfix:after
{
content: "";
display: table;
}
.clearfix:after { clear: both; overflow: hidden;}
八，[Sass]混合宏
如果你的整个网站中有几处小样式类似，比如颜色，字体等，在 Sass 可以使用变量来统一处理，那么这种选择还是不错的。但当你的样式变得越来越复杂，需要重复使用大段的样式时，使用变量就无法达到我们目了。这个时候 Sass 中的混合宏就会变得非常有意义
@mixin border-radius($radius:5px)
{ -webkit-border-radius: $radius; border-radius: $radius;}
@mixin 是用来声明混合宏的关键词，有点类似 CSS 中的 @media、@font-face 一样。border-radius 是混合宏的名称。大括号里面是复用的样式代码。
上面是一个简单的定义混合宏的方法，当然， Sass 中的混合宏还提供更为复杂的，你可以在大括号里面写上带有逻辑关系，帮助更好的做你想做的事情,如：
@mixin box-shadow($shadow**...**) {
@if length($shadow) >= 1 {
@include prefixer(box-shadow, $shadow);
} @else{ $shadow:0 0 4px rgba(0,0,0,.3);
@include prefixer(box-shadow, $shadow); }}
在 Sass 中通过 @mixin 关键词声明了一个混合宏，那么在实际调用中，其匹配了一个关键词“@include”来调用声明好的混合宏。例如在你的样式中定义了一个圆角的混合宏“border-radius”:
@mixin border-radius{ -webkit-border-radius: 3px; border-radius: 3px;}
在一个按钮中要调用定义好的混合宏“border-radius”，可以这样使用：
button { **@include** border-radius;}
这个时候编译出来的 CSS:
button { -webkit-border-radius: 3px; border-radius: 3px;}
九，[Sass]扩展/继承
在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承//
.btn {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff;
@extend .btn;
}
十，[Sass]占位符 %placeholder
Sass 中的占位符 %placeholder 功能是一个很强大，很实用的一个功能. %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码
%mt5 {
margin-top: 5px;
}
.btn {
@extend %mt5;
}
对以上来个下总结
十一，@if
假设要控制一个元素隐藏或显示，我们就可以定义一个混合宏，通过 @if...@else... 来判断传进参数的值来控制 display 的值。
@mixin blockOrHidden($boolean:true) {
@if $boolean {
@debug "$boolean is #{$boolean}";
display: block;
}
@else {
@debug "$boolean is #{$boolean}";
display: none;
}
}
.block {
@include blockOrHidden;
}
.hidden{
@include blockOrHidden(false);
}
十二，@for
在 Sass 的 @for 循环中有两种方式：
@for $i from <start> through <end>
@for $i from <start> to <end>
这两个的区别是关键字 through 表示包括 end 这个数，而 to 则不包括 end 这个数。
如下代码，先来个使用 through 关键字的例子：
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
编译出来的 CSS:
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
.item-3 {
width: 6em;
}
如果是to关键字，就没了item-3
顺带说一下这个“-#{$XX}”,这个是sass的插值，插入变量值，这样能让变量和属性值变的很完美
接下来用一个生成网格的实例：
···
//SCSS
$grid-prefix: span !default;
$grid-width: 60px !default;
$grid-gutter: 20px !default;
%grid {
float: left;
margin-left: $grid-gutter / 2;
margin-right: $grid-gutter / 2;
}
//through
@for $i from 1 through 12 {
.#{$grid-prefix}#{$i}{
width: $grid-width * $i + $grid-gutter * ($i - 1);
@extend %grid;
}
}
//to
@for $i from 1 to 13 {
.#{$grid-prefix}#{$i}{
width: $grid-width * $i + $grid-gutter * ($i - 1);
@extend %grid;
}
}
···
编译出来的 CSS:
.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
float: left;
margin-left: 10px;
margin-right: 10px;
}
.span1 {
width: 60px;
}
.span2 {
width: 140px;
}
.span3 {
width: 220px;
}
.span4 {
width: 300px;
}
.span5 {
width: 380px;
}
.span6 {
width: 460px;
}
.span7 {
width: 540px;
}
.span8 {
width: 620px;
}
.span9 {
width: 700px;
}
.span10 {
width: 780px;
}
.span11 {
width: 860px;
}
.span12 {
width: 940px;
}
