4-3 [Sass]变量的调用
本节编程练习不计算学习进度,请电脑登录imooc.com操作

[Sass]变量的调用

在 Sass 中声明了变量之后,就可以在需要的地方调用变量。调用变量的方法也非常的简单。

比如在定义了变量

$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;


在按钮 button 中调用,可以按下面的方式调用

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

编译出来的CSS:

.btn-primary {
  background-color: #337ab7;
  color: #fff;
  border: 1px solid #2e6da4;
}

 

任务

在编辑第三行调用已定义的变量 $width.

 

  1. //Welcome to imooc learning Sass
  2. $brand-primary : darken(#428bca, 6.5%) !default; // #337ab7
  3. $btn-primary-color: #fff !default;
  4. $btn-primary-bg : $brand-primary !default;
  5. $btn-primary-border : darken($btn-primary-bg, 5%) !default;
  6.  
  7. .btn-primary {
  8. background-color: $btn-primary-bg;
  9. color: $btn-primary-color;
  10. border: 1px solid $btn-primary-border;
  11. }
下一节