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:
If the variable exists → use it
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.
Top comments (0)