Click here to navigate the course.

Drag the edges to resize the window.

In Projects, you can keep track of your progress as you go throught the tasks. Check each item as you complete it!

Code Editor
Web Browser
Sustainable SCSS

@Extend vs @Mixin

Sweet! Recall that mixins, unlike extended selectors, insert the code inside the selector's rules wherever they are included, only including "original" code if they are assigning a new value to the rule's properties via an argument.

Let's look at the @mixin and @extend constructs closely and compare output:

@mixin no-variable { font-size: 12px; color: #FFF; opacity: .9; } %placeholder { font-size: 12px; color: #FFF; opacity: .9; } span { @extend %placeholder; } div { @extend %placeholder; } p { @include no-variable; } h1 { @include no-variable; }

would compile to:

span, div{ font-size: 12px; color: #FFF; opacity: .9; } p { font-size: 12px; color: #FFF; opacity: .9; //rules specific to ps } h1 { font-size: 12px; color: #FFF; opacity: .9; //rules specific to ps }

We can clearly see extending results in way cleaner and more efficient output with as little repetition as possible.

As a general rule of thumb, you should

  • Try to only create mixins that take in an argument, otherwise you should extend.

  • Always look at your CSS output to make sure your extend is behaving as you intended.

Community Forums
Get help and ask questions in the Codecademy Forums
Report a Bug
If you see a bug or any other issue with this page, please report it here.