Scss学习--定义变量!default、!global、!optional

!default

如果变量已经被赋值，不会再被重新赋值

但是如果变量还没有被赋值，则会被赋予新的值。

$content:"First blood";
$content:"Double kill" !default;
p{
    content:"#{$content}";
}

>>>P{
	content:'First blood';
}

$contents:"Double kill" !default;
p{
    content:"#{$contents}";
}

>>>P{
	content:'Double kill';
}

注意：

变量的值是 null 空值时将视为未被 !default 赋值。

$content: null;
$content: "Non-null content" !default;

#main {
  content: $content;
}
编译为

#main {
  content: "Non-null content"; }

!optional

如果 @extend调用失败终端会收到错误提示会报错

例如：只有 h1.notice 包含 .notice 时会报错,因为 h1 与 a 冲突，会生成新的选择器，如果要求 @extend 不生成新选择器，可以通过 !optional 声明达到这个目的

h1{
    height: 50px;
    .errorMessageBox{
        width: 100px;
    }
}

.example.important{
    @extend .errorMessageBox !optional;
}

!global

$widthNumber:20px;
p{
  width: $widthNumber;
} 

div{
  $heightNumber:30px !global; //将局部变量转换为全局变量
  height: $heightNumber;
}

nav{
  height:$heightNumber;
}