Sass !default

sass中定义变量时,如果变量之前已经有一个值,就会被新的值覆盖

$color: red;
$color: blue;
body {
  color: $color; // blue
}

这种情况下,如果编写Sass库并希望用户可以配置某些变量的值,无论是在库之前引入变量配置文件(被库中的变量覆盖)还是之后引入(变量改变了但是已经没用了),都没法实现

Sass提供的!default标识,可以在变量没定义或者值为null时才使用新的值

$color: red;
$color: blue !default;
body {
  color: $color; // red
}

这样在引入Sass库之前引入变量设置,就可以修改主题中的变量

@import 'vars'; // 配置变量
@import 'theme'; // 使用!default的变量会被配置覆盖
Comments
Write a Comment