我们写css时，可能!default和!global这两个标志并不会被用到，但我们在看别人的项目时，可能就会遇到这两个标志。所以，我们还是应该把它们搞明白的。

那它们有什么作用呢？

!global

!global通常被用在Mixin和function中，它能使定义在mixin或function中的变量变为全局变量。

$var: red;
@mixin foo($var: $var) {
    default-color: $var;
    $var: green; //局部变量，变量$var被设为green；在局部作用域中，$var都会被设为green
    scoped-color: $var;
}
.bar {

    @include foo;
    color: $var;
}

上述代码会被编译成：

.bar {
    default-color: red;
    scoped-color: green;
    color: red;
}

若在mixin foo中，$var添加一个!global标志，那么$var会变为全局变量。此时，全局变量$var不会影响局部作用中的$var。

$var: red;
@mixin foo($var: $var) {
    default-color: $var;
    $var: green !global; //局部变量，变量$var被设为green；在局部作用域中，$var都会被设为green
    scoped-color: $var;
}
.bar {

    @include foo;
    color: $var;
}

上述代码会被编译成：

.bar {
    default-color: red;
    scoped-color: red;
    color: green;
}

!default

!default被添加在变量值的后面，表示当前值为变量的默认值，和javascript中函数参数的默认值是一样的。

如果一个变量被分配了默认值，那么你可以直接使用默认值，也可以重新为它赋值。

• 为变量重新赋值后，上下文中的该变量将会被重写为新值。
• 没有为变量重新赋值时，那么上下文中的该变量将会赋予默认值。

!default在自定义样式时非常有用。

//mixin.scss
$border-position-all: all !default;
$border-default-size: 1px !default;
$border-default-pattern: solid !default;
$border-default-color: $black !default;

@mixin add-border($border-position: $border-position-all,
  $border-size: $border-default-size,
  $border-pattern: $border-default-pattern,
  $border-color: $border-default-color) {

  @if $border-position == $border-position-all {
    border: $border-size $border-pattern $border-color;
  }
  @else {
    border-#{$border-position}: $border-size
    $border-pattern $border-color;
  }
}

//-------------------------------------------------------------------------------------------

$border-default-pattern: dotted;
$border-default-color: red;

@import "mixin.scss";

.block-border {
  @include add-border($border-size: 2px);
}

上面的代码将会被编译成：

.block-border {
    border: 2px dotted red
}