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 h1s }

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.



Remove the center mixin in the helper/_mixins.scss partial that does not take in a variable. Convert the placeholder named %center inside the helper/_placeholders.scss partial.

Be sure to change the include statements to extend inside both span and h1:

@extend %center;

Click “Run” to see your changes in the browser and inspect them in the output of main.css.

Sign up to start coding

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?