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 Add Reusable Logic to Your Sass Loop Through Data in a Map with @each

Sean Flanagan
Sean Flanagan
33,235 Points

Error in my header.scss

There seems to be an error in line 26 of my header.scss, but I can't work out how to fix it. Consequently my web page is only showing one image and the HTML.

Here's a snapshot of my workspace:

https://w.trhou.se/7vjjg8kf58

Thanks in advance for any help.

Sean

5 Answers

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher

Hi Sean Flanagan,

I forked your latest Workspace snapshot, ran sass --watch, previewed it and everything worked & looked as it was supposed to. Is there an updated snapshot I can take a look at? Thanks! :)

Sean Flanagan
Sean Flanagan
33,235 Points

Hi Guil.

I know what I did, or should I say, what I didn't do. It's my own fault. I just didn't think. I forgot to run sass --watch scss:css prior to previewing. You mentioning that command jogged my memory. I reopened my workspace and ran the --watch command in the console and now it's working.

I've upvoted all your replies and given one of them Best Answer.

Thank you for all your help and sorry for the inconvenience. And happy belated New Year!

Sean :-)

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher

Hi Sean Flanagan,

It looks like you need to use the mq() mixins shown in this video in place of the media queries. The $break-xs and $break-l breakpoint variables are no longer defined. Hope this helps. :)

Sean Flanagan
Sean Flanagan
33,235 Points

Hi Guil. Thanks for your help. I watched the video and followed your instructions but the page is still not showing properly.

I looked at my _variables.scss file and both $break-xs and $break-l are declared there.

I've taken another snapshot of my edited workspace as it is now. Would it be ok to have another look please?

Here it is:

https://w.trhou.se/q0ulaehn86

Thanks

Sean

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher

Thanks Sean,

Looks good. Now everything works because you've added the variables to _variables.css. It's OK to use variables for your breakpoints and the map and mq() mixin for this course. :)

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher

No worries at all, Sean Flanagan -- always happy to help. Glad it works now. BTW, forgetting to run watch happens to me, too. :)

Sean Flanagan
Sean Flanagan
33,235 Points

Hi Guil.

It's still not working for me. Not only can I only see the HTML and the image, but when I shrink the preview page, the breakpoints don't kick in so it doesn't adjust to accommodate screen size.

What exactly do I need to do?

Sean