FSCSS Variable Fallback Operator (||)

Source: Dev.to

Variable Fallback Operator

FSCSS v1.1.13 introduces a new feature: Variable Fallback Operator. You can now define a default value directly inside a variable declaration using:

property: $/variable || fallback;

FSCSS resolves the value in this order:

1. If the variable exists → use it
2. Otherwise → use the fallback value

Example

Component Definition

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

Usage

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

If a variable is not provided, FSCSS automatically applies the fallback.

Why This Matters

The fallback operator makes components:

• More reusable
• Safer by default
• Cleaner to maintain
• Plugin‑friendly

Plugin authors can now ship components that work even when users don’t define every variable.

Required Variables

You can still enforce strict variables. If $bg! is marked required and missing, FSCSS will warn accordingly.

---

https://fscss.devtem.org/