1、什么是CSS预处理器，什么是Sass
**（1） **CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。
（2） Sass是一种最早出现的“CSS预编译处理器”，进行网页样式设计，然后再编译成正常的CSS文件。Sass提供了许多便利的写法，大大节省了设计者的时间，使得CSS开发，变得简单和可维护 。
2、Sass与SCSS有什么区别
(1).文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
(2).语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似
Sass 语法
$font-stack: Helvetica, sans-serif //定义变量
$primary-color: #333; //定义变量
body
font: 100% $font-stack
color: $primary-color
** SCSS 语法**
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
编译出来的 CSS
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
3、sass与scss和纯css写法差别
Sass 和 CSS 写法的确存在一定的差异，由于 Sass 是基于 Ruby 写出来，所以其延续了 Ruby 的书写规范。在书写 Sass 时不带有大括号和分号，其主要是依靠严格的缩进方式来控制的。如：
Sass写法：
body
color: #fff
background: #f36
而在 CSS 我们是这样书写：
body{
color:#fff;
background:#f36;
}
SCSS 和 CSS 写法无差别，这也是 Sass 后来越来越受大众喜欢原因之一。简单点说，把你现有的“.css”文件直接修改成“.scss”即可使用。
4、Sass 语法格式
这里说的 Sass 语法是 Sass 的最初语法格式，他是通过 tab 键控制缩进的一种语法规则，而且这种缩进要求非常严格。另外其不带有任何的分号和大括号。常常把这种格式称为 Sass 老版本，其文件名以“.sass”为扩展名。来看一个 Sass 语法格式的简单示例。假设我们有一段这样的 CSS 代码：
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
现在用 Sass 的语法格式来编写：
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
在整个 Sass 代码中，我们没看到类似 CSS 中的大括号和分号。
注：这种语法格式对于前端人员都不太容易接受，而且容易出错。
5、、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;
}
6、了解sass前世和它安装的前提条件
（1）sass 是基于ruby来发明的 这也决定了他前期的语法结构类似ruby的严格缩进的风格。
（2）我们想利用sass语言 必须要安装ruby的安装包 以ruby为开发环境 来编写sass。
（3）在ruby环境下使用 gem install sass(网络安装方式)gem install 本地sass安装包的路径。
- sass的编译
（1）命令编译
sass .scss:.css
（2）GUI图形化界面操作编译
koala
(特别注意：)注意ruby 和 koala 安装目录下的核心配置文件的编码格式 为“UTF-8”
7、输出方式
nested：嵌套缩进的css代码，它是默认值。
expanded：没有缩进的、扩展的css代码。
compact：简洁格式的css代码。
compressed：压缩后的css代码。
8、Sass声明变量
· 变量声明符($) 变量名称：变量值; $width: 300px;
· 普通变量：声明变量以后可以在全局范围内使用;
· 默认变量：在值的后面加上！default;
· 全局变量：定义在元素外面的变量
· 局部变量：定义在元素内部的变量
· 全局变量的影子：变量名称相同下，局部变量称之为全局变量的影子，局部变量只在局部范围内覆盖全局变量
9、嵌套：
选择器嵌套，
nav{
a{
color:red;
header &{color:green;}
}
}
属性嵌套，
.box{
border:{
top:1px solid red;
bottom:1px solid green;
}
}
伪类嵌套
.clearfix{
&:before,&:after{content:"";display:table;}
&:after{clear:both;overflow:hidden;}
}
10、混合宏的声明、调用、参数
(1)@mixin:声明混合宏的关键字
(2)@include：调用混合宏的关键字
(3)混合宏的传参有三种写法
1. 只传变量名，调用的时候再去传值
2. 变量直接在混合宏中赋值
3. 基于前两种我们也可以传多个参数 注意“ ... ”
11、Sass扩展/继承
·通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。
·继承特点：为了减少冗余的代码。
·语法：@extend 要继承的对象。
12、占位符
占位符声明关键字：%placeholder
特点：不被继承就不会编译成css代码
总结：声明方式不同、调用方法不同、使用环境不同
·混合宏：
声明方式：@mixin
调用方法：@include
使用环境：相同的代码块在不同的环境传递不同的值，可以通过混合宏来定义重复使用的代码块。
不足：针对相同的样式，会造成冗余（对于）的代码块。
·继承：
声明方式：.class
调用方法：@extend
使用环境：相同的代码块不需要传递不同的值，使用Sass的继承来调用已存在的基类。使用继承会将调用相同基类的代码合并到一起。
不足：如果基类，并不存在于HTML结构时，不管调不调用，都会被编译在css中。
·占位符：
声明方式：%placeholder
调用方法：@extend
使用环境：和继承类似，不同的是，相同的代码块并没有在基类中存在，而是额外声明。如果不调用以声明的占位符，将不会产生任何样式的代码。如果在不同选择器调用，将会把编译出的相同的css代码合并在一起。
13、插值
·声明插值的关键语法：#{}
·特点：Sass获得一个更好的结构体系。比如说想写更干净的、高效的和面向对象的CSS。
·是指变量插值，或者变量替换。
$a:(margin,padding); //声明一个变量
@mixin set-value($side,$value){ //声明一个混合宏 和两个形参
@each $b in $a{ //遍历语句 $a是被遍历的对象 $b遍历中当前取到的值
#{$b}-#{$side}:$value; //动态生成我们想要的属性
}
}
.box{
@include set-value(top,14px);
}
***编译后的CSS***
.box{
margin-top:14px;
padding-top:14px;
}
·当想设置属性值的时候你可以使用字.符串插入进来，另一个有用的用法是构建一个选择器。
@mixin size($class, $small, $medium, $big){
.#{$class}-small { font-size:$small; }
.#{$class}-medium{ font-size: $medium; }
.#{$class}-big{ font-size: $big; }
}
@include size("header-text",12px,20px,40px);
***编译后的CSS***
.header-text-small{ font-size: 12px; }
.header-text-medium{ font-size: 20px; }
.header-text-big{ font-size: 40px; }
注释
/类似CSS注释/
//类似JS注释
14、Sass数据类型
数字：1,2,3,10px;
字符串：有引号字符串(单引号和双引号) 和 无引号字符串;在用插值语句时，有引号字符串将被编译为无引号字符串，方便了在混合指令中引用选择器名。
颜色：blue、red...;
布尔：true、false;
空值：null;
值列表：用空格和逗号分开的;
15、运算
加法：可以做各种运算，但对于不同类型的单位，在计算时会报错
.box {
width: 20px + 8in;
} //width: 788px;
减法：和加法类似，碰到不同类型的单位也会报错
$a:50px;
$b:10px;
.box{
width: $a - $b
} //width: 40px;
乘法：能够支持多种单位，但当一个单位同时声明两个值会报错,碰到不同类型的单位也会报错。
.box {
width: 10px * 2;
} //width: 20px;
除法：除法用/代替 运算的时候要加括号
.box {
width: (100px / 2);
} //width:50px;
变量运算
·可以使用变量进行运算
$a:20px;
$b:10px;
$c:5px;
.box{
width:$a + $b + $c
} //width:35px;
颜色运算
·红绿蓝各颜色分段单独运算
p {
color: #010203 + #040506;
} //color: #050709;
字符运算
·用"+"对字符串拼接
div {
cursor: e + -resize;
} //cursor: e-resize;
数字运算
·和数学运算一样
.box {
width: ((220px + 720px) - 11 * 20 ) / 12 ;
} // width: 60px;
