Comments for nested selectors don't appear where expected

Question

Following is my SCSS file and its output. But when you check the compiled comments all are misplaced.

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 output

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

Is it a bug or issue with SCSS?. I'm using Compass 0.12.2 (Alnilam).

Answer 1

suggestion:

change your comments standard. instead of

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

put the comments inside of the opening of the block:

.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;
}

would that work for your needs?