Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Sass Basics (retired) Variables, Mixins, and Extending Selectors Extending Selectors

Posted by Brigette Eckert
Brigette Eckert
16,957 Points

Place holder error.

I'm getting an error when I change from .bar to %bar. Wondering if anyone else is getting this error?

Sass::SyntaxError: ".menu" failed to @extend ".bar". The selector ".bar" was not found. Use "@extend .bar !optional" if the extend should be able to fail.

Jacob Mishkin
Jacob Mishkin
23,117 Points

is bar a class? if so you need to use .bar and have some prior CSS written for that element prior to using @extend. I'm not sure what %bar will do, since that is an operator. can you post the .bar CSS along with the .menu CSS. SO we can take a better look at it.

Chris Wiley
Chris Wiley
14,669 Points
Chris Wiley
Chris Wiley
14,669 Points

If I am understanding what you are asking when using the @extend you need to do it like this:

.menu {
  @extend %bar;
}

You can't define %bar and then @extend .bar

1 Answer

Kenneth Black
Kenneth Black
23,140 Points

Looks like you just changed the declaration and not the @extends calls (because it's still referencing .bar, which shouldn't exist anymore). Your code should look like this:

%bar { /* you changed it here */
    height: 14px;
    font-size: 10px;
    > div {
        float: left;
        clear: none;
    }
}

.menu {
    @extend %bar; /* <- you also need to change it here */
    background: #345;
}

.nav {
    @extend %bar; /* <- and here */

}