Comments for nested selectors are not displayed where they are expected

Question

Below is my SCSS file and its output. But when you check the compiled comments, everything is inappropriate.

SCSS

/* Navigation */ .navigation{ background: red; /*Subnavigation 1*/ .subnav{ background: #FFF; } /*Subnavigation 2*/ .subnav2{ background: black; } } 

Output

 /* Navigation */ .navigation { background: red; /*Subnavigation 1*/ /*Subnavigation 2*/ } .navigation .subnav { background: #FFF; } .navigation .subnav2 { background: black; } 

Desired Conclusion

 /* Navigation */ .navigation { background: red; } /*Subnavigation 1*/ .navigation .subnav { background: #FFF; } /*Subnavigation 2*/ .navigation .subnav2 { background: black; } 

Is this a bug or a problem with SCSS ?. I am using Compass 0.12.2 (Alnilam).

Answer 1

sentence:

Change your comment standard. instead

 /* Navigation */ .navigation{ background: red; /*Subnavigation 1*/ .subnav{ background: #FFF; } /*Subnavigation 2*/ .subnav2{ background: black; } } 

put comments inside the block expansion:

 .test {/*nav*/ background: red; .test2{ /*subnavigation 1*/ background:#fff; } .test3 {/*subnavigation 2*/ background:#fff; } } 

and you get the following output:

 /* line 27, ../scss/main.scss */ .test { /*nav*/ background: red; } /* line 30, ../scss/main.scss */ .test .test2 { /*subnavigation 1*/ background: #fff; } /* line 34, ../scss/main.scss */ .test .test3 { /*subnavigation 2*/ background: #fff; } 

will work for your needs?

Answer 2

You need to move the comments to the {} block belonging to them , or write them without nested syntax.

Consider

 /* Navigation */ .navigation{ background: red; /* TODO add a background image */ .subnav{ background: #FFF; } } 

In this case, you probably do not want

 /* TODO pick a better red */ .subnav{ background: #FFF; } 

Answer 3

You can use a loud comment to leave comments when you add them, when the compass compiles:

 /*! This comment isn't going anywhere. */