嵌套LESS规则中的CSS注释

Question

如何在LESS嵌套规则中添加CSS注释？例如：

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

这是我期望获得的输出：

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

但是，不幸的是，这是如何处理的：

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

有可能做到吗？

Answer 1

使用/* */无法做到这一点。

原因是它仍在div范围内，因此无法使用/* */条评论。

但是，在LESS中，您可以将//用于不通过编译器的单行注释（因此不会在编译的CSS代码中结束但是在LESS代码中。

Here is the official documentation on comments

Answer 2

嗯，您可以在嵌套规则中

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

输出：

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

Answer 3

我希望这对你有用。

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

，输出将是，

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

或多或少会像你期待的那样!!!