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 Advanced Sass Advanced Directives @at-root: Part 2

Chris Shaw
Chris Shaw
26,676 Points
Posted by Chris Shaw
Chris Shaw
26,676 Points

Can't complete challenge

Hello,

It would appear the Sass compiler is slightly broken as the correct answer which works perfectly fine on SassMeister doesn't on Treehouse.

For reference this is failing here but not on SassMeister.

.foo {
  @media (min-width: 400px) {
    display: flex;
    @at-root (without: media rule) {
      #{&}-bar {
        display: inline-block;
      }
    }
  }
}

2 Answers

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Chris,

If I paste that code into Sassmeister I get an error that has to do with your use of the variable interpolation syntax #{ } I believe this is only for variables.

You can do this &-bar and the suffix will be added to the end of the parent selector.

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

For some reason it's working now, no reply here whether Sass was updated or something, also I did try it without interpolation but it's recommended doing it that way as of Sass 3.4 since you can capture and store selector names.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Not sure what's going on because I just tried your code again and it still produces a compilation error in the code challenge. It does work if I switch to 3.4 in sassmeister.

Did you actually see interpolation being used with the parent selector like you have it in one of the videos? I searched around a bit and only found the instructor using it like I suggested.

3.4 was released on Aug 18th and this course appears to be using 3.3. In the intro video where it shows the different sass compiler versions the 3.4 version wasn't yet a stable release.

Since 3.4 is so new I don't think it would be realistic to expect something from 3.4 to work in this code challenge.

Also, in this particular case, isn't it cleaner to use &-bar? I haven't been able to find anything in the documentation that would suggest you should use #{&}-bar

Dale Sande
STAFF
Dale Sande
Treehouse Guest Teacher
Dale Sande
Dale Sande
Treehouse Guest Teacher

@jason, you are correct. When the course was produced, I was focused on 3.3 and libsass. If you switch to either of those in SassMeister, this code WILL NOT work.

Switching to 3.4, the code example WILL work.

Given that 3.4 is a pre release of the library, I would not rely on this to be true unless this is specifically listed in the Sass Changelog

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Dale,

Thanks for clearing that up for us.