Search code examples
csssasscomments

SASS Nested Comments


I have a SCSS file looks like this

.seletor{

    /* comment 1 */
    .sub-selector{

    }

    /* comment 2 */
    .sub-selector{

    }

}

When I compile it, i am getting this

.seletor {
font-size: 8px;}
/* comment 1 */
/* comment 2 */ } 
.seletor .sub-selector {
  font-size: 8px; } 
.seletor .sub-selector {
  font-size: 8px; }

What i want to get it is

.seletor {
font-size: 8px;}

/* comment 1 */ 
.seletor .sub-selector {
  font-size: 8px; } 

/* comment 2 */
.seletor .sub-selector {
  font-size: 8px; }

So the comments must be the exact position that i wrote in the scss file. How do i achieve this?


Solution

  • Unfortunately it doesn't appear to be possible. I would wonder why you would want the comments to output like that? Generally speaking, the power behind sass is to allow your working document to be readable, and the actual final product to be compressed.

    Some references:

    If you're using compass, look at line_comments:
    http://compass-style.org/help/documentation/configuration-reference/

    Which will give you an out put like this:

    /* line 1, sass/file.scss */
    .selector { font-size: 8px; }
    

    Other wise, if you need to comment your working document, and don't want them to appear in odd positions in the output, use // instead of /* */