Lesson 04 · 10 min
Use @extend with care
It groups selectors. It's easy to merge things you didn't mean to. For a button, a mixin or a class in HTML is more common.
10 minLesson 4 of 8Practice includedAsk AI on any point
%btn { … } is a silent placeholder. .primary { @extend %btn; } compiles into a group of selectors without %. Sounds economical. In reality extend pulls the selector into every place the placeholder was used, and the CSS diff becomes unreadable. For a beginner: a mixin or just a shared .btn class.
Sign in to continue
The rest of this lesson opens after sign up
The first lesson of every course is open without an account. To read on, solve the practice and use Ask, create a free account or log in.