### **1.21. 默认值** **定义**：sass的默认变量仅需要在变量值后面加上!default，即可变成默认值。 <br/> <br/> #### **一、全局覆盖默认变量：** **操作：**在默认变量“**之前**”重新声明下变量的值。 sass样式 `$line-height:2;//重新声明变量` `$line-height:1.5;//默认变量` ~~~ body{ line-height: $line-height; } ~~~ 转化成css ~~~ body{ line-height:2; } ~~~ **注意点：** **1.**如在默认变量“**之前**”重新声明变量值，则后面使用该变量名称的值均为默认值之前**重新声明的变量值**。 <br/> **2.**如在默认变量“**之后**”重新声明变量值，则相当于没有默认值，**按照从上到下**，下面的覆盖下面的规则进行覆盖。 则：第一个default会被第二个default覆盖。第二个default会被没有声明default的变量覆盖，所以最终输出的是没有声明default的变量 列： sass样式： ~~~ $height:300px!default; $height:400px; ~~~ 则相当于： ~~~ $height:300px; $height:400px; ~~~ 则后面的变量名为：$height的值均为400px； <br/> <br/> <br/> #### **二、局部覆盖默认值** 则在需要局部默认的样式里重新定义变量值。 列： `默认变量：$line-height:40px!default;` 如h6需要行高为30px;，但希望后面仍然使用40px的行高。 则写成： scss样式为： ~~~ h6{ $line-height:30px!; line-height:$line-height; } ~~~ 则转化成css： h6{ line-height：30px; } 如果该h6有子代或后代，则后代在样式中同样子给样式赋予该变量名，则该变量的值是h6中重新定义的值，非默认值。