[Sass]声明变量

[Sass]声明变量

定义变量的语法：

在有些编程语言中（如，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则表示默认值。

注：了解 Bootstrap 的 Sass 版本的同学，就一眼能看出，上面的示例代码是 Bootstrap 定义 primarybutton 的颜色。

[Sass]普通变量与默认变量

普通变量

定义之后可以在全局范围内使用。

$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。默认变量的价值在进行组件化开发的时候会非常有用。

转自：慕课网

（感谢O(∩_∩)O）