sass变量详解—你知道和不知道的都在这里～

写在前面：

现在一直使用sass写css，当初入门的时候，看的很多教程，当时看的云里雾里的，现在看来还是蛮详细的，就是一点，不够小白。本人文章类型一直比较偏小白的，想要更好的为不会用sass提供一点学习的资料，相信本文对想要学习sass的人，还是有极大的参考价值的。里面有些细节，也许对已经学会使用sass的大手子也有一定的参考价值。

变量是什么？

w3c关于JavaScript 变量的介绍：

可以去搜一下js 变量

上面一大堆巴拉巴拉的东西，可以先这么理解，把变量看作一个存放东西的盒子，可以将钥匙、手机、饮料等物品存放在这个盒子中，也可以在需要的时候换成我们想存放的新物品，那里面的旧的东西就存不了，只能存一个东西。

建议

这里有个很好的网站，可以在线把sass文件编译成css文件，大家可以跟着栗子，一边看，一边动手做做demo，看看最后输出css是什么样子的。

JS中文网 – 前端进阶资源教程 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台，每天都可以在这里找到技术世界的头条内容

---

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*/

JS中文网 – 前端进阶资源教程 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台，每天都可以在这里找到技术世界的头条内容

解析：

所谓的多值变量就是字面上的意思，把多个相关的值写在一个变量里，然后通过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.这里不解析了，详见注释。

JS中文网 – 前端进阶资源教程 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台，每天都可以在这里找到技术世界的头条内容

变量用#{}包裹

这是一个格式，用在属性或者选择器上面里。大家看一下栗子就懂了。

$ipt:input;
$btm:bottom;
.#{$ipt}{ /*这里输出.input{}*/
    padding-#{$btm}:5rem;/*这里输出padding-bottom: 5rem;*/
}

后话：

断断续续写了三天，每天都有在写，今天算是差不多写完了。这篇是面向对sass变量概念不太熟悉的朋友，写的较为详细，在短短的一篇文章里面肯定无法保证阅读本文的人对sass有多熟悉，但我希望通过这篇文章，让你知道sass变量的一些用法，概念。能够不再那么一头雾水，那么我这篇文章的目的也就达到了。

参考文献：

sass揭秘之变量

以上。2017.4.22