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
main.css
Web Browser
Learn

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.

Report a Bug
If you see a bug or any other issue with this page, please report it here.