Sass教程六：Sass知识点之——变量

开课吧，让职场更自由！

通过前面几期，Sass的使用说明书已经发放给各位了，还没来得及看的同学可以查收一下，这期的主旨是Sass的功能说明书，各位看官准备好瓜子水果...

今天讲变量

变量来源于数学，是计算机语言中能储存计算结果或能表示值抽象概念。由于变量让你能够把程序中准备使用的每一段数据都赋给一个简短、易于记忆的名字，因此它们十分有用。

其实简单来说，就是给人起外号，我觉得250px这个值不好看，我给它起个外号叫SB，于是我以后就可以这么写了：

$SB:250px;
 
.box{
  width: $SB;
  height: 20px;
}

现在，box的宽度虽然我写的是SB，但是它实际代表的是250px。至于前面那个美元”$”符号，它其实是一个标识，告诉Sass, 这是一个外号，并不是一个真SB。

有了这个外号之后就很方便啦，以后如果想要修改box的宽度，直接喊一声：SB变身！变成100px，然后box的宽度就变成100px了。

来看个案例：

现在我在页面上写了一个矩形，一个三角形，一个按钮。这些都是平常我们页面中很常见的元素，它们都用了一个我也说不清的颜色，总之不是太好看，暂且先不管，来看看代码：

$color: #899;
 
.box{
  width: 200px;
  height: 200px;
  border: 5px solid $color;    /*-------------*/
  float: left;
}
 
.arrow{
  margin: 100px;
  width: 0;
  height: 0;
  border-width: 40px 20px 0;
  border-style: solid;
  border-color: $color transparent transparent transparent;   /*-------------*/
  float: left;
}
 
.btn{
  width: 100px;
  height: 40px;
  margin-top: 96px;
  border: 1px solid $color;   /*-------------*/
  border-radius: 4px;
  color: $color;
  text-align: center;
  line-height: 40px;
  float: left;
}

在代码的开头我定义了一个变量：$color: #899; 然后分别用在了代码中的标记处。那这时候我们就可以说，上面图中的三个元素，它们的颜色都是由变量 $color来控制的，现在这个颜色不好看，说不定哪天UI小姐姐就会让我改，但是没关系，我们有变量，当需要修改颜色的时候，直接去修改变量的值就可以了比如现在我们要把他们变成粉色的：

这时候我只需要把变量修改掉就好了

$color: #f991ff;

得到结果：

另外，既然说到变量，那么变量它是有作用范围的，它只能在一定范围里起作用，比如我在a.scss中定义了变量$color 那么在b.scss中就不能使用了，只能在a.scss中使用。

现在我们知道了在a.scss中声明的变量只能在a.scss中使用了，其实这也是有前提的，这个前提就是这个变量的声明没有被任何东西所包裹。比如说：

.box{
  $zhuangBiFan: #00afff;
  width: 200px;
  height: 200px;
  border: 5px solid $color;
  float: left;
}

在这段代码里，变量 $zhuangBiFan 就可以说被选择器 .box 包裹起来了，那么这时候这个变量在 .box的外面就不能使用了这时候我们可以说变量 $zhuangBiFan 的作用范围就是在选择器.box里面。作用范围，还有一个比较专业的名称，叫做作用域，其实域就是范围的意思，只不过叫作用域会显得稍微高大上一点点，所以就叫他作用域吧~

不过呢，Sass还提供了一种变量越狱的方法，那就是在变量的后面加上一个global :

#main {
  $width: 5em !global;
  width: $width;
}
 
#sidebar {
  width: $width;
}

在这个情况下，#main里面的变量在#sidebar里面也可以使用（咋有种红杏出墙的赶脚）

另外有趣的一点是：变量的值可以引用其他变量！！！

$color: #f991ff;
$globalBorder: 1px solid $color;
 
.box{
  border: $globalBorder;
}
 
编译之后：
.box {
  border: 1px solid #f991ff;
}

原生css中的变量

既然提到变量，那就不得不提一嘴，css3其实也已经有变量了，只不过定义和使用没有sass的这么方便而已在我的另一篇文章中我就用到了原生的css变量。里面有这么一段：

.eyes:before,
.eyes:after{
    content: '';
    position: absolute;
    top: 110px;
    width: 100px;
    height: 100px;
    background-color: #4e4e4e;
    border-radius: 50%;
    background-image:
            radial-gradient(circle at var(--left1), white 1px, transparent 1px),
            radial-gradient(circle at var(--left2), black 10px, transparent 11px),
            radial-gradient(circle at var(--left3), white 30px, transparent 31px);
}
 
.eyes:before{
    left: 26%;
    --left1: 84px;
    --left2: 80px;
    --left3: 64px;
}
 
.eyes:after{
    right: 15%;
    --left1: 16px;
    --left2: 19px;
    --left3: 36px;
}

这里面就用到了变量，变量分别是left1、left2和left3。这些变量由于作用域的原因分别给before和after附上了不同的值所以最后得到的结果也是不一样的简单说一下css的变量声明方式：

--name:value;

使用的时候：

var(--name)

不过这里要注意，css变量的声明必须被包含，不能直接 ——-nmae:value; 可以考虑这么写：

:root{
    --name:20px; /*声明*/
}
 
.box{
    width: var(--name); /*使用*/
}

发布于 2020-10-10 15:29

Sass

前端开发

Web 开发