4-2 [Sass]普通变量与默认变量
本节编程练习不计算学习进度,请电脑登录imooc.com操作

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

任务

  1.  
  2. $baseLineHeight: 2;
  3. $baseLineHeight: 1.5 !default;
  4. body{
  5. line-height: $baseLineHeight;
  6. }
下一节