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: ```scss 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.
Instructions
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.