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:

<button class="btn">按钮-变量</button>

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：什么时候声明变量

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