写在前面：
现在一直使用sass写css，当初入门的时候，看的很多教程，当时看的云里雾里的，现在看来还是蛮详细的，就是一点，不够小白。本人文章类型一直比较偏小白的，想要更好的为不会用sass提供一点学习的资料，相信本文对想要学习sass的人，还是有极大的参考价值的。里面有些细节，也许对已经学会使用sass的大手子也有一定的参考价值。
变量是什么？
w3c关于JavaScript 变量的介绍
可以去搜一下js 变量
上面一大堆巴拉巴拉的东西，可以先这么理解，把变量看作一个存放东西的盒子，可以将钥匙、手机、饮料等物品存放在这个盒子中，也可以在需要的时候换成我们想存放的新物品，那里面的旧的东西就存不了，只能存一个东西。
建议
这里有个很好的网站，可以在线把sass文件编译成css文件，大家可以跟着栗子，一边看，一边动手做做demo，看看最后输出css是什么样子的。
这里有个很好的网站，可以在线把sass文件编译成css文件，大家可以跟着栗子，一边看，一边动手做做demo，看看最后输出css是什么样子的。
sass变量的格式：
sass变量格式：$var:value; 栗子：$color:red;
1.必须是$开头
解析：这是sass变量的符号
2.$后面紧跟变量名
解析：变量名首字母必须为字母(a-z A-Z)，下划线(_)开头。
3.变量的值
解析：变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样）。
sass变量的用法：
$color:red;/*1.这就是声明变量*/ p{color:$color;}/*P标签的颜色被改为red————这是变量的使用*/
1.变量使用之前要先声明变量
解析：声明在变量这个盒子里面要放什么东西，那里面就有东西了
2.第二步使用变量。
解析：现在变量里面有东西了，要把里面的东西拿出来用，就要先找到变量这个盒子，找到盒子才能使用里面的东西。变量的变量名，就是这个盒子在的地方，把他放在你所要用的地方，就是把盒子里面的东西取出来用了。
多值变量：
多值变量格式：
$var:value,value,value;
实例：
$back:#fff,green,red;/*1.多个变量一起声明*/ p{ color: nth($back,1);/*2.输出green*/ } span{ color: nth($back,3);/*3.输出red*/
解析：
所谓的多值变量就是字面上的意思，把多个相关的值写在一个变量里，然后通过nth($var,index)来获取第几个值。通常可以用于在写页面的时候声明多个颜色，然后再样式里面直接使用就可以了。
关于变量的作用域：
sass里面的代码片段
解析：
以上是我在sass文件里面做的一个demo，里面分成了三个部分，下面分别给大家解析一下。
1.第一部分，变量要提前声明才能使用。这里我上面没有声明$text1这个变量，直接使用，导致文件报错。
sass文件编译是从上往下的，所以使用的时候，变量要声明在上面，当上面没有声明的时候，使用这个变量就会报错，文件编译错误，导致css文件无法使用。
2.第二部分，sass的全局属性，详见demo，里面注释的很清楚了。
因为sass文件是从上往下解析的，同一个sass变量在外界声明的时候，会有一个覆盖的作用，即上面已经声明过的变量，会被下面声明的给覆盖。
3.第三部分，sass也有局部变量。局部被包裹的变量，将不会影响到外界的变量，只在自己的一亩三分田里面起作用，外界要引用这个变量也是不行的。如果这里我没有定义外界的变量，局部被包裹起来的那部分$text:blue;还是会生效的。
变量的默认值default：
刚才说了，sass文件是从上往下渲染的，后面声明的变量会覆盖前面的变量，default这里的作用就是使后面的变量变成声明在第一个的变量（就是开始声明这个变量的地方，默认是第一个。）
变量格式：
$var:value!default; 栗子：$color:red!default;
代码示例。
default代码示例1
解析：
1.这里把注释弄掉之后，sass编译会出错，因为上面没有声明这个变量，说明加上default之后，刚才关于变量的作用域的介绍也是不变的，下面还有一个局部作用域的栗子。
2和3.在代码注释里面，已经很详细了，不赘述了。
4.说明连续声明两个default也是有效的，第一个default会被第二个default覆盖。第二个default会被没有声明default的变量覆盖，所以最终输出的是没有声明default的变量red。
default代码示例2
1.这里不解析了，详见注释。
变量用#{}包裹
这是一个格式，用在属性或者选择器上面里。大家看一下栗子就懂了。
$ipt:input; $btm:bottom; .#{$ipt}{ /*这里输出.input{}*/ padding-#{$btm}:5rem;/*这里输出padding-bottom: 5rem;*/ }
后话：
断断续续写了三天，每天都有在写，今天算是差不多写完了。这篇是面向对sass变量概念不太熟悉的朋友，写的较为详细，在短短的一篇文章里面肯定无法保证阅读本文的人对sass有多熟悉，但我希望通过这篇文章，让你知道sass变量的一些用法，概念。能够不再那么一头雾水，那么我这篇文章的目的也就达到了。
