SASS 是一种常见的前端 CSS 预处理器，可以帮助开发者更加方便地管理 CSS 样式。在 SASS 中，!optional 和 !default 是两个非常有用的变量修饰符，可以让我们更加灵活地定义和使用变量。下面我们就来详细介绍一下这两个修饰符的使用技巧。
- !optional 的使用
!optional 修饰符可以将一个变量定义为可选的，即如果该变量没有被定义或者被赋值为 null 时不会报错，而是使用默认值。下面是一个简单的示例：
$color: #000 !optional; body { background-color: $color; // 如果 $color 未定义，则会使用默认值 #000 }
需要注意的是，!optional 只有在变量被赋值为 null 或者未定义时才会生效。如果变量被赋值为其它值，如 0 或 false，仍然会正常使用该值。
- !default 的使用
与 !optional 不同，!default 修饰符可以用于定义默认值。如果一个变量已经被定义，那么 !default 修饰符将不会对其产生任何影响。如果一个变量未定义，那么 !default 修饰符将会为该变量设置默认值。下面是一个示例：
$color: #000 !default; body { background-color: $color; // 如果 $color 未定义，则会使用默认值 #000 } $color: #fff; // 如果在此处修改 $color 的值，上方的代码将使用新值而不是默认值
需要注意的是，如果一个变量已经被赋值（即使是赋值为 null），那么设置 !default 修饰符将不会对其产生影响。因此，如果你希望 !default 生效，需要确保在该变量未被赋值时使用。
- 实际应用
!optional 和 !default 在实际开发中非常有用。在编写组件库时，我们通常需要定义一些变量，例如主题色、字号、间距等。如果这些变量被定义，则使用定义的值；如果这些变量未被定义，则使用默认值。下面是一个实际应用的示例：
-- -------------------- ---- ------- -- -------- --------------- ------- --------- ----------- ---- --------- -- ------ ------ - ----------------- --------------- ------ ------ ------- ----- ---------- ----------- -------- --- ----- -------------- ---- - ----- - ------- --- ----- --------------- ---------- ----------- -------- ---- -------------- ---- -展开代码
在上面的代码中，我们首先定义了主题色和字号的默认值，然后使用了 !default 修饰符。这样，在组件库使用时，如果需要修改主题色或字号，只需要在组件库中重新定义即可。
- 总结
!optional 和 !default 是 SASS 中非常有用的变量修饰符，可以让我们更加方便地定义和使用变量。在实际开发中，我们可以使用这些修饰符来定义默认值、可选值等，使代码更加灵活和易于维护。需要注意的是，为了保证修饰符的正确使用，我们需要在每个变量的赋值时考虑到相关修饰符的影响。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a8f2bdadd4f0e0ff237678
