5：sass中的变量

之所以用sass，就是因为sass可以使用变量，函数等编程的概念

1：变量的声明

$width:100px

上面：

• $:变量生命符号
• $width:变量名称
• 100px:变量值

2： 变量的调用

以下是Bootstrap中primaryButton的颜色的定义的使用

sass:

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

.btn {
width: 100px;
height: 50px;
line-height: 50px;
font-size: 16px;
color: $btn-primary-color;
background-color: $btn-primary-bg;
border: 1px solid $btn-primary-border;
}

css:

.btn {
width: 100px;
height: 50px;
line-height: 50px;
font-size: 16px;
color: #f00;
background-color: #337ab7;
border: 1px solid #e60000; }
html:

按钮-变量

3:普通变量

定义之后可以再该变量的范围之内使用

$btn-primary-color:#fff；

4:默认变量

只需要在默认变量之前重新赋值就会出现覆盖默认值

$btn-primary-color:#fff !default;

5:全局变量和局部变量

$color : #f00;//定义全局变量
header{
color: $color;//使用全局变量
}
section {
$color1:#ff0;//定义局部变量
a{
color: $color;//使用局部变量
}
}
footer{
color: $color;//使用全局变量
}

6：什么时候声明变量

• 变量值出现多次
• 变量值会被更新