Parameters with defaults: @mixin pad($y: 1rem, $x: $y) { padding: $y $x; }
Going deeper
In production Sass work, Mixins with parameters matters when documents, stylesheets, or apps must stay maintainable across teams and releases—not only in isolated demos.
Common pitfalls
Watch for copy-paste configs, skipping validation or tests, and mixing concerns (structure vs presentation vs behavior) in one layer.
Practice
- Apply one technique from this lesson in the playground.
- Write one interview-style sentence explaining when you would use mixins with parameters on a real project.
Challenge
Focus ring mixin
- Create
@mixin focus-ring($color)with outline styles. - Apply to
.demo-card__btn:focus-visible.
Done when: compiled CSS includes focus styles on the button.