接上篇笔记，安装好依赖，配好开发环境之后， 我们便可以在项目中编写sass样式了。
1、变量
在sass中，允许我们使用变量，所有变量用$开头，使用非常方便，直接看例子：
$color: #1875e7；
div{
color: $color;
}
当然变量也可以做插值使用,需要用#{}包裹变量：
$side: left;
.border{
border-#{$side}-radius: 5px;
}
那有同学问了：为什么要用变量呢？我直接写进去不是一样嘛？
为什么用sass写样式块呢？不光是开发，在修改的时候同样便捷，比如一套系统，有一套颜色风格，在很多地方都会用到同种颜色，那么把这个颜色定义为变量，在调试的时候只要修改这个变量的值，所有引用变量的地方都会自动变化，是不是很便捷~
2、计算功能
$ten: 10px
body{
margin: (18px / 2);
top: 150px + 100px;
left: $ten * 10%
}
3、嵌套
这是我认为比较舒服的地方，大大简化了我的css代码量
// 普通css中：
div{
background: #fff
}
div p {
background: #000;
//balabala···
}
a{
color: #fff;
}
a:hover {
color: red
}
// sass中
div{
background: #fff;
p{
background: #000;
//balabala
}
}
a{
color: #fff;
// 在嵌套中，可以用&来引用父元素
&:hover{
color: red
}
}
基本用法会了，我们再看些高大上的
1、继承
sass允许我们某个选择器的样式继承另一个选择器的样式：
.aclass{
background: red
}
//假设我们有个bclass类，要继承aclass的样式，那我们就用@entend
.bclass{
@extend .aclass;
color: #fff
}
2、mixin
可以把它理解为宏，可以复用的代码块，我们先用@mixin指令，定义一个代码块：
@mixin left {
float: left;
margin-left: 10px;
}
接着，我们用@include指令调用这个mixin:
div{
@include left;
}
既然能够成为宏，那必须得能传参：
@mixin left($value: 10px){
float: left;
margin-left: $value;
}
这个10px呢就是默认缺省值，根据我们的需要，使用时可加入参数：
div{
@include left(20px);
}
3、插入文件
Sass的@import和CSS的不一样。CSS的@import，只有在执行到的时候才去下载其他CSS文件，这就影响了页面加载；而Sass的@import在生成CSS文件的时候就把相关文件导入进来了。
我们用@import命令来插入外部文件：
@import 'path/abc.scss'
4、占位符
（以%开头）:
%left{
float: left;
margin-left: 10px
}
div{
@extend %left
}
那这个占位符和直接继承有啥区别呢？主要区别在于编译后的css上面，占位继承使css更简洁，我这里不做过多解释。
还不够给力吗？我们在来看看sass的高级用法
1、条件语句
我们用@if指令
p{
@if 1+1 == 2 {border: 1px solid;}
@if 5<3 {border: 2px dotted;}
}
//当然有配套的`@else`指令
@if lightness($color) > 30% {
background: #000;
} @else {
background: #fff
}
2、循环语句
for循环必须支持滴：
@for $i from 1 to 10 {
.border- #{$i} {
border: #{$i}px solid blue;
}
}
也支持while循环：
$i: 6;
$while $i >0 {
.item-#{i} {
width: 2em * $i;
$i: $i - 2;
}
}
自定义函数
@function double($n){
@return $n * 2
}
#slidebar{
width: double(10px);
}
看完这篇文章，那么恭喜你你已经入门sass了，其实还有很多更好玩的，可以去看官方文档，现在我把天空还给你，你自己去点缀你的蓝天吧～
