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 CSS to Sass Refactoring with Sass Defining Media Queries

Grant Campbell
Grant Campbell
2,245 Points
Posted by Grant Campbell
Grant Campbell
2,245 Points

The {} do not seem to end with each other properly. I am seeing a lot of extra } in my css and scss. Is this normal?

Here is an example from the project. If you look in the editor and put your cursor on the } after the display:none property it reads that } as the end of the .arrow opening { and not as the end of the {display: none opener. I am having this issue with all media queries I am putting in. They seem to work but when I look at the output CSS it is adding in the extra } and it seems to be just a dead character.

.arrow { width: 50px; margin-top: 150px;

@media #{$brk-narrow} {display: none;} }

1 Answer

Taylor Espejo
Taylor Espejo
3,939 Points
Taylor Espejo
Taylor Espejo
3,939 Points 
.arrow {
  width: 50px;
  margin-top: 150px;

  @media #{$brk-narrow} {
         display: none;
    }
}

This works absolutely fine ! I feel like perhaps you might have missed a '{' or '}' somewhere else in the code ?

If not perhaps the code editor you're using doesn't support the sass syntax very well; and therefore not really aligning the curly braces well. Doesn't mean the code is wrong though ! I use sublime and it seems to do a wonderful job :)

Grant Campbell
Grant Campbell
2,245 Points
Grant Campbell
Grant Campbell
2,245 Points

Yes, I find it does work. I was using the Workspace to follow along with the project so that is the editor I was using. I will look back for a time stamp but there are instances in the video as well where you see it happening on his screen. Ill keep an eye moving forward as I do more SASS work and see if its a common occurrence.