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) Getting Started with Sass Nesting Selectors

Julie Vandebosch
Julie Vandebosch
10,360 Points

Sass, Scout and Sublime Text

I am using Sass with Scout and Sublime Text. But my css file looks different than the one in the video (it adds comments and h1):

/* line 1, main.scss */
body {
  background: #eee;
}

/* line 6, main.scss */
.blog .entry h1 h1 {
  font-size: 20px;
  color: blue;
}
/* line 10, main.scss */
.blog .entry h1 p {
  font-size: 12px;
}
/* line 13, main.scss */
.blog .entry h1 a {
  color: red;
}

What can I do about this?

3 Answers

Kevin Korte
Kevin Korte
28,149 Points

The comments are coming from Scout.

For your project, look in the configure tab. I believe that with Compass, if the environment is "development" it adds the comments in so you know where in your Sass file that CSS is coming from. Setting this to "production" should remove it.

The extra H1 is probably coming from some issue with your Sass file. Seeing the code would help.

Let me know if that's the case. It's been awhile since I have used Compass or Scout.

Julie Vandebosch
Julie Vandebosch
10,360 Points

I already found out about the extra h1, I made a mistake in the sass file. And indeed, setting it to production removed the comments. Thanks!

Kevin Korte
Kevin Korte
28,149 Points

Awesome, good deal!

Does the Syntax highlighting look different? If so don't worry, it changes from editor to editor and version to version.

Julie Vandebosch
Julie Vandebosch
10,360 Points

Yes, there is no highlighting in my scss file. And I meant that it adds comment lines and h1.

If you want Sublime to highlight Sass you'll need to install this:

https://sublime.wbond.net/packages/Syntax%20Highlighting%20for%20Sass

Julie Vandebosch
Julie Vandebosch
10,360 Points

Thanks! Can you also explain why it adds the comments and the h1?

When does it add the comments? e.g. At save, while typing, ...

Julie Vandebosch
Julie Vandebosch
10,360 Points

When I save it. And I made a mistake in the html file, so that explains the extra h1 :)

Unfortunately I don't know why it's adding the comments. When you delete the comments and save, what happens. Maybe it's an addon or sublime has strg+s as a Comment-Adding Shortcut (Try to save with File>Save).

Julie Vandebosch
Julie Vandebosch
10,360 Points

When I delete the comments and save, they are gone. But when I save the .scss, they appear again. Thanks for the help!

Chris Shaw
Chris Shaw
26,676 Points

Hi Julie,

Could you please post your Sass code and the command you're running as the compiled output is simply what the Sass compiler spits out which isn't an issue but I would like to see your selectors as it looks like you're nesting an extra H1 inside your .blog .entry h1 selector.

Julie Vandebosch
Julie Vandebosch
10,360 Points

Yes, I found out already. But thanks!