Sass变量的定义
- 声明变量的符号“$”
- 变量名称
- 赋予变量的值
变量的分类
变量可以大致分为普通变量;还有默认变量,也就是在后面添加一个!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变量还是全局的。