Blog

Mixins, Functions, @extend and Control Flow: Removing Repetition with @if, @each and @for

Use a mixin when you need parameters, media queries or generated selectors, a placeholder with @extend for rules that really are the same, and @function to compute values; generate repeated rules from data with maps and @each. We add a breakpoint mixin and stock badges to Bookstore, and measure why slash division produces invalid CSS like 12px/2, how @extend breaks inside media queries and what making everything a mixin costs before and after gzip.