嵌套LESS规则中的CSS注释

Question

How can I add CSS comments in LESS nested rules? Ex:

div{
    span{
        font-size: 16px;
        color: #fff;
    }
    /*This is my comment*/
    em{
        color: blue;
    }
}

This is the output I expect to get:

div span {
  font-size: 16px;
  color: #fff;
}
/*This is my comment*/
div em {
  color: blue;
}

But, unfortunatelly this is how it is processed:

div {
  /*This is my comment*/
}
div span {
  font-size: 16px;
  color: #fff;
}
div em {
  color: blue;
}

Is it possible to make this?

Answer 1

This isn't possible using /* */ .

The reason being that it is still under the div scope, so it won't work using /* */ comments.

However, in LESS you can use // for single line comments which doesn't go through the compiler (so doesn't end up in the compiled CSS code but will be in the LESS code).

Here is the official documentation on comments .

Answer 2

Well, you can get your comment inside nested rules:

div {
    em { 
        /* This is my comment */
        color: blue;
    }
}

output:

div em {
  /* This is my comment */
  color: blue;
}

Answer 3

I hope this would be useful for you.

/*This is my comment*/
div {
   em {     
       color: blue;
   }
   span {
       font-size: 16px;
       color: #fff;
   }   
}

and the output will be,

/*This is my comment*/
div em {
  color: blue;
}
div span {
  font-size: 16px;
  color: #fff;
}

More or less it would be like what you are expecting !!!