Sass变量的定义和调用

Sass变量的定义

1. 声明变量的符号“$”
2. 变量名称
3. 赋予变量的值

变量的分类

变量可以大致分为普通变量；还有默认变量，也就是在后面添加一个！default；全局变量；局部变量。

普通变量：

$fontSize:12px;

body{

font-size:$fontSize;

}

默认变量：

$baseLineHeight:1.5 !default;

body{

line-height:$baseLineHeight;

}

sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可,没错，就是“之前”。

$baseLineHeight:2;

$baseLineHeight:1.5 !default;

body{

line-height:$baseLineHeight;

}

变量的调用

定义变量

$brand-primary:darken(#428bca,6.5%) !default;
$btn-primary-color:#fff !default;
$btn-primary-bg:$brand-primary !default;
$btn-primary-border:darken($btn-primary-bg,5%) !default;

调用

.btn-primary{
background-color:$btn-primary-bg;
color:$btn-primary-color;
border:1px solid $btn-primary-border;
}

全局变量

在选择器、函数、混合宏...外面定义的变量

// 定义全局变量
$color:red !default;
//调用全局变量
.oDiv{
color:$color;
}

局部变量

反之就是局部变量

.box{
    $color:red; //定义局部变量
    .content{
        color:$color; //调用局部变量
    }
}
span{
    color:$color;
}

全局变量的影子

当在局部范围（选择器内、函数内、混合宏内...）声明一个已经存在于全局范围内的变量时，局部变量就成为了全局变量的影子。基本上，局部变量只会在局部范围内覆盖全局变量。譬如以上示例中 .box .content中的color会覆盖全局变量的color,但是只会在这元素内部覆盖，到了外面，调用color变量还是全局的。

 

 

关注我吧

关注「前端一起学」公众号 ，看着项目进阶学习，让我们一起学前端，一起进步。