介绍
Sass可以让我们以一种更加灵活快速的方式去写我们的css代码，比如我们可以使用变量来去表示我们常用的值，也可以使用嵌套来让我们清晰的编写不同层级的css样式，我们还可以使用@mixin的方式像js函数一样，通过参数的方式传递不同的值去返回不同的样式。我们还可以使用sass内部定义的函数帮我们去对样式做一些计算，当然也可以去自定义函数来完成想要的功能；下面让我们一步步走进sass的世界！
.sass和.scss
Sass有两种语法，一种是sass最开始用的叫做缩进式的语法，使用这种语法的文件扩展名是.sass,在Sass语法3.0里面介绍了一种新的语法叫Sassy CSS，也是现在比较常用的Sass语法，它比较符合我们的直观感觉，更像我们的css语法，更灵活一些，这种语法的扩展名是.scss。以下都是根据scss语法来进行学习。
在线编译工具
变量
我们可以去定义一些变量，然后给他们一些特定值，在创建样式的时候可以使用这个变量去创建样式，不必要再去指定特定的样式，这样在统一管理样式的时候有很大的帮助。如果想要去修改某个统一的样式的值的时候只需要修改变量的值，就可以做到一处修改，初初生效的效果。
// 定义变量
$primary-color:#1269b5;
// 引用变量
div.box{
background-color:$primary-color;
}
main-header{
border:1px soild $primary-color;
}
编译结果：
嵌套（Nesting）
1.选择器嵌套
// 普通css
.nav{
height:100px;
}
.nav ul{
margin:0;
}
.nav ul li{
floot:left;
list-style:none;
padding:5px;
}
.nav ul li:hover{
background-color:#0d2f7e;
}
.nav-text{
font-size:15px;
}
// scss写法
.nav{
height:100px;
ul{
margin:0;
li{
floot:left;
list-style:none;
padding:5px;
// 这里可以使用&去引用父选择器
&:hover{
background-color:#0d2f7e;
}
}
}
// 注意这里
& &-text{
font-size:15px;
}
}
编译结果：
tip: css查找规则从后往前找，嵌套越多查找越慢，所以层级尽量不要太深。
2.属性嵌套
// 普通css
body {
font-family: Helvetica, Arial, sans-serils;
font-size: 15px;
font-weight: nomarl;
}
// scss
body{
font:{
family: Helvetica, Arial, sans-serils;
size: 15px;
weight: nomarl;
};
}
还有border、自定义样式等等都可以这么写；
编译结果：
mixin
可以把它想象成有名字定义好的样式，我们可以在任意地方重复的去使用它，中文译为“混合”，比较像JavaScript里面的函数，每一个mixin都有自己的名字，使用这个名字可以去调用它，还可以提供参数，让它使用起来更加灵活。
// 定义方式
@mixin 名字 （参数1，参数2 ...）{
...
}
// 例子1
@mixin alert{
color:#8a6d3b;
background-color:#ffffff;
}
.alert-warning {
@include alert;
}
// 例子2 带嵌套
@mixin alert{
color:#8a6d3b;
background-color:#ffffff;
a{
color:#561d2f;
}
}
.alert-warning {
@include alert;
}
// 例子3 使用参数
@mixin alert($text-color,$background){
color:$text-color;
background-color:$background;
a{
color:$text-color;
}
}
.alert-warning {
@include alert(#8a6d3b,#ffffff);
}
.alert-info {
// 可以根据参数名称传参，就不需要考虑顺序
@include alert($background:#d9edf7,$text-color:#31708f);
}
继承、扩展（@extend）
在Sass里面我们可以通过继承或者扩展来减少重复的动作，用的是@extend指令，功能是可以让一个选择器去继承另一个选择器里面定义的所有样式。
.alert{
padding:15px;
}
.alert a{
font-weight:bold;
}
.alert-info{
@extend .alert;
background: #d9edf7;
}
生成的是群组选择器，来保证让使用继承的选择器拥有它继承的选择器还有相关选择器里面定义的所有样式。
@import
css本身其实带了一个导入功能, 叫@import,在一个css文件里面可以把其他css文件包含进来，不过在css里面，每次使用@import浏览器都会发起一次新的http请求去下载被导入的css文件，每次css请求都会消耗服务器的资源，同时也会引起页面的阻塞，所以会让页面变得更慢一些。
scss扩展了@import的功能，在写scss的时候可以使用@import把其他scss文件包含进来，scss会把他们编译成一个css文件，这样可以把一个项目需要的样式分割成不同的小部分，然后用这种导入的方式把不同的小部分的样式包含到一个scss文件里面。这些小的部分在scss里面叫 Partials，每一个Partials就是一个scss文件，文件的名字需要用一个下划线开头，这样scss就知道这个文件时一个Partials,他就不会把这个文件编译成一个单独的css。Partials可以让我们的css模块化，并且更有条理一些。
scss注释
scss里面有三种注释：单行注释、多行注释、强制注释。
单行注释不会出现在编译之后的css里面，适合开发环境下的注释。
多行注释会在编译输出的css里面保留，不过在压缩输出的css里面会去掉。
强制注释会一直出现在css里面。
在sassmeister网站上可以通过下面的方式去输出不同模式下的css
数据类型
Sass 支持 6 种主要的数据类型：
- 数字，1, 2, 13, 10px
- 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
- 颜色，blue, #04a3f9, rgba(255,0,0,0.5)
- 布尔型，true, false
- 空值，null
- 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
- maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2) SassScript 也支持其他 CSS 属性值，比如 Unicode 字符集，或 !important 声明。然而Sass 不会特殊对待这些属性值，一律视为无引号字符串。
更多请翻阅官方文档6.3
颜色
颜色的表示有很多种，常见的有：
-
16进制的数据来表示颜色
-
RGB（red,green,blue） or RGBA
-
一些可以中字符来表示颜色
-
hsl(色相0-360，饱和度0-100%，明度0-100%) or hsla
颜色函数
- adjust-hue 调整颜色色相的值
- lighten 变亮（改变明度）
- darken 变暗（改变明度）
- saturate 增加颜色纯度（改变饱和度）
- desaturate 减少颜色纯度（改变饱和度）
- opacify 增加颜色的不透明度（修改颜色alpha的值）
- transparentize 减少颜色的不透明度（修改颜色alpha的值）
列表（List）
在Sass就是表示css声明里面的一些属性的一串值，列表里面的值可以用空格分隔开，也可以用逗号分隔开，比如：
border:1px soild #000
interpolation
interpolation可以让我们把一个值插入到另一个值里面，这个语法可以让我们在样式的选择器或者属性上面去使用变量。
控制指令
1.@if
2.@for
3.@each
4.@while
自定义函数
警告与错误
警告信息会显示在命令行上面
