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

Great job! You've accomplished some fancy styling with mixins. Now it's time to tie in how the & selector plays into mixins.

Sass allows & selector usage inside of mixins. The flow works much like you think it would:

  1. The & selector gets assigned the value of the parent at the point where the mixin is included.

  2. If there is no parent selector, then the value is null and Sass will throw an error.

@mixin text-hover($color){ &:hover { color: $color; } }

In the above, the value of the parent selector will be assigned based on the parent at the point where it is invoked.

.word { //SCSS: display: block; text-align: center; position: relative; top: 40%; @include text-hover(red); }

The above will compile to the following CSS:

.word{ display: block; text-align: center; position: relative; top: 40%; } .word:hover{ color: red; }

Notice that the mixin inherited the parent selector .word because that was the parent at the point where the mixin was included.

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