CSS Mixin/Macro Polyfill - Parameter Variations
One @mixin definition, many @apply invocations with different
parameters
How parameter variations work
A single @mixin can accept parameters that
change the resulting styles. By invoking
@apply with different argument values, you
create distinct visual variations from one reusable
definition.
1. Colored Card Variations
@mixin --colored-card(--bg <color>: lightblue, --text
<color>: black, --border-color <color>:
darkblue) { @result { background-color: var(--bg); color:
var(--text); border: 2px solid var(--border-color); } }
.card-blue { @apply --colored-card(lightblue, darkblue,
darkblue); } .card-coral { @apply --colored-card(lightcoral,
darkred, darkred); } .card-green { @apply
--colored-card(lightgreen, darkgreen, darkgreen); }
.card-gold { @apply --colored-card(#fff8dc, #8b6914,
#daa520, 16px); }
@apply --colored-card(lightblue, ...)
Blue card
@apply --colored-card(lightcoral, ...)
Coral card
@apply --colored-card(lightgreen, ...)
Green card
@apply --colored-card(#fff8dc, ..., 16px)
Gold card (extra rounded)
2. Button Style Variations
@mixin --button-style(--bg <color>: #007acc, --text
<color>: white, --size: 16px, --padding: 12px 24px,
--radius: 6px) { @result { background-color: var(--bg);
color: var(--text); font-size: var(--size); padding:
var(--padding); border-radius: var(--radius); } }
.button-primary { @apply --button-style(#007acc, white); }
.button-danger { @apply --button-style(#dc3545, white); }
.button-pill { @apply --button-style(#20c997, white, 14px,
10px 28px, 50px); }
3. Spacing Variations
@mixin --spaced-box(--vertical: 20px, --horizontal: 20px,
--bg: #f0f0f0) { @result { padding: var(--vertical)
var(--horizontal); background: var(--bg); } } .box-compact {
@apply --spaced-box(10px, 10px, #e3f2fd); } .box-normal {
@apply --spaced-box(20px, 20px, #e8f5e9); } .box-spacious {
@apply --spaced-box(40px, 40px, #fff3e0); }
Compact spacing (10px)
Normal spacing (20px)
Spacious spacing (40px)
4. Shadow Intensity Variations
@mixin --shadow-card(--blur: 10px, --spread: 0, --opacity:
0.1) { @result { box-shadow: 0 4px var(--blur) var(--spread)
rgba(0, 0, 0, var(--opacity)); } } .shadow-subtle { @apply
--shadow-card(6px, 0, 0.05); } .shadow-medium { @apply
--shadow-card(15px, 0, 0.12); } .shadow-dramatic { @apply
--shadow-card(30px, 5px, 0.25); }