声明变量
定义变量的语法：
在有些编程语言中（如，JavaScript）声明变量都是使用关键词“var”开头，但是在 Sass 不使用这个关键词，而是使用大家都喜欢的美元符号“$”开头。
上图非常清楚告诉了大家，Sass 的变量包括三个部分：
1.声明变量的符号“$”
2.变量名称
3.赋予变量的值
来看一个简单的示例，假设你的按钮颜色可以给其声明几个变量：
$brand-primary : darken(#428bca, 6.5%) !default; // #337ab7$btn-primary-color : #fff !default;$btn-primary-bg : $brand-primary !default;$btn-primary-border : darken($btn-primary-bg, 5%) !default;
如果值后面加上!default则表示默认值。
普通变量
定义之后可以在全局范围内使用。
$fontSize: 12px; body{ font-size:$fontSize; }
编译后的css代码：
body{ font-size:12px; }
默认变量
sass 的默认变量仅需要在值后面加上 !default 即可。
$baseLineHeight:1.5 !default; body{ line-height: $baseLineHeight; }
编译后的css代码：
body{ line-height:1.5; }
sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。
$baseLineHeight: 2; $baseLineHeight: 1.5 !default; body{ line-height: $baseLineHeight; }
编译后的css代码：
body{ line-height:2; }
可以看出现在编译后的 line-height 为 2，而不是我们默认的 1.5。默认变量的价值在进行组件化开发的时候会非常有用。
变量的调用
在 Sass 中声明了变量之后，就可以在需要的地方调用变量。调用变量的方法也非常的简单。
比如在定义了变量
$brand-primary : darken(#428bca, 6.5%) !default; // #337ab7$btn-primary-color: #fff !default;$btn-primary-bg : $brand-primary !default;$btn-primary-border : darken($btn-primary-bg, 5%) !default;
在按钮 button 中调用，可以按下面的方式调用
.btn-primary { background-color: $btn-primary-bg; color: $btn-primary-color; border: 1px solid $btn-primary-border; }
编译出来的CSS:
.btn-primary { background-color: #337ab7; color: #fff; border: 1px solid #2e6da4; }
[Sass]局部变量和全局变量
Sass 中变量的作用域在过去几年已经发生了一些改变。直到最近，规则集和其他范围内声明变量的作用域才默认为本地。如果已经存在同名的全局变量，从 3.4 版本开始，Sass 已经可以正确处理作用域的概念，并通过创建一个新的局部变量来代替。
全局变量与局部变量
先来看一下代码例子：
//SCSS$color: orange !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量) .block { color: $color;//调用全局变量 } em { $color: red;//定义局部变量 a { color: $color;//调用局部变量 } } span { color: $color;//调用全局变量 }
css 的结果：
//CSS .block { color: orange; } em a { color: red; } span { color: orange; }
上面的示例演示可以得知，在元素内部定义的变量不会影响其他元素。如此可以简单的理解成，全局变量就是定义在元素外面的变量，如下代码：
$color:orange !default;
$color 就是一个全局变量，而定义在元素内部的变量，比如 $color:red; 是一个局部变量。
除此之外，Sass 现在还提供一个 !global 参数。!global 和 !default 对于定义变量都是很有帮助的。我们之后将会详细介绍这两个参数的使用以及其功能。
全局变量的影子
当在局部范围（选择器内、函数内、混合宏内...）声明一个已经存在于全局范围内的变量时，局部变量就成为了全局变量的影子。基本上，局部变量只会在局部范围内覆盖全局变量。
上面例子中的 em 选择器内的变量 $color 就是一个全局变量的影子。
//SCSS$color: orange !default;//定义全局变量 .block { color: $color;//调用全局变量 } em { $color: red;//定义局部变量（全局变量 $color 的影子） a { color: $color;//调用局部变量 } }
多值变量
List形式
$colors: red blue green;
color: nth($colors, 1);
map形式
$map: (key1:value1, key2:value2);
map-get(key1);
什么时候声明变量？
我的建议，创建变量只适用于感觉确有必要的情况下.
1.该值至少重复出现了两次；
2.该值至少可能会被更新一次；
3.该值所有的表现都与变量有关（非巧合）。
基本上，没有理由声明一个永远不需要更新或者只在单一地方使用变量。
如果有任何技术问题咨询交流欢迎加群523916260，有大牛坐镇。
样式导入
局部文件
专门为导入而编写的 sass文件，并不需要生成对应的独立文件，这个时候，sass如何判别呢？
依靠约定，sass局部文件的文件名以下划线开头，局部文件可以被多个不同的文件引用。当一些样式需要在多个页面甚至多个项目中使用时，这非常有用。在这种情况下，有时需要在你的样式表中对导入的样式稍作修改，sass有一个功能刚好可以解决这个问题，即默认变量值。
导入局部文件
@import（文件名）
语法和css中导入文件的语法是一致的，那么就存在导入的文件可以是scss文件也可以是css原生文件的问题。
只要符合下面的条件，scss会自动识别导入的原生css文件:
1、被导入文件的名字以.css结尾；
2、被导入文件的名字是一个URL地址（比如http://xxx/css.css）
3、被导入文件的名字是CSS的(url)值。
来源：oschina
链接：https://my.oschina.net/u/3830332/blog/1802332