Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Sass Basics Add Reusable Logic to Your Sass Storing Values in Maps

Anusha Lee
PLUS
Anusha Lee
Courses Plus Student 14,787 Points

Error: Undefined variable: "$break-s". on line 28 of scss/layout/_header.scss from line 17 of scss/style.scss

Hi everyone,

This is what I got from the console. I believe I follow what Guil said in the video and I watched the video several times. I worked on the variable partial, but it seems the header partial goes wrong. There is also something wrong with my style.scss.

Can someone help look what goes wrong with my code? Thank you very much in advance. https://w.trhou.se/jqu3ldmvl4

1 Answer

Jeremy Jackson
Jeremy Jackson
10,731 Points

Hey Anusha,

I just had the same problem as you. Earlier in the course we changed some of the media queries to the new mixin approach and we were supposed to change the rest on our own. I didn't and I think you probably didn't either. So, these errors are just where you have written your media queries the regular way without the mixin.

Here is line 28 of your _header.scss

@media (max-width: $break-s) {
  header {
    height: 340px;
    h1 {
      font-size: 3.4em;
    }
  }
}

you just need to change it to this

 @include mq('s') {
    height: 340px;
    h1 {
      font-size: 3.4em;
    }
  }

I actually had it as 'xs' instead of 's' in my code so that may also make a difference. After I fixed this one in my code there was about 4 or 5 more media queries I had to change as well before my code worked write.

Hope this helps.