FSCSS 变量回退运算符 (||)

Source: Dev.to

变量回退运算符

FSCSS v1.1.13 引入了新特性：变量回退运算符。现在可以在变量声明中直接定义默认值，语法如下：

property: $/variable || fallback;

FSCSS 按以下顺序解析值：

1. 如果变量存在 → 使用该变量
2. 否则 → 使用回退值

示例

组件定义

str(Button#1, "
background: $/bg || #06f;
color: $/color || #fff;
border: $/border || 2px solid;
padding: 10px;
border-radius: 20px;
")

用法

.btn {
  $bg: linear-gradient(40deg, #aaf, #000);
  $color: #020;
  Button#1
}

如果未提供变量，FSCSS 会自动使用回退值。

为什么这很重要

回退运算符让组件：

• 更易复用
• 默认更安全
• 更简洁易维护
• 更友好于插件

插件作者现在可以发布即使用户未定义所有变量也能正常工作的组件。

必需变量

仍然可以强制使用严格变量。如果 $bg! 被标记为必需且缺失，FSCSS 将相应发出警告。

---

https://fscss.devtem.org/