Less comments are non-executable statements that are placed inside the source code. These comments are written to make source code clear and easier to understand by other developers and testers. Comments can be written in block style and inline within the Less code, but single line comments are not appeared in CSS code.

There are two types of comments supported in Less.

  • Single line comments: In Less, single line comments are written using // followed by comments. The single line comments are not displayed in generated CSS output.
  • Multiline comments: In Less, multiline comments are written between /* ?.*/. The multiline comments are preserved in generated CSS output.

Less Comment Example

Let's take an example to demonstrate the sage of comments in Less file.

See this example:

Create an HTML file named "simple.html", having the following data.

HTML file: simple.html

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.    <title>Less Comments Example</title>  
  5.    <link rel="stylesheet" type="text/css" href="simple.css" />  
  6. </head>  
  7. <body>  
  8.    <h1>Example using Comments</h1>  
  9.    <p class="myclass">JavaTpoint</p>  
  10.    <p class="myclass1">A solution of all technology.</p>  
  11. </body>  
  12. </html>  

Create a LESS file named "simple.less", having the following data. This file also contains single line and multiline comments.

LESS file: simple.less

  1. /* It displays the  
  2. red color! */  
  3. .myclass{  
  4. color: red;  
  5. }  
  6. // It displays the green color  
  7. .myclass1{  
  8. color: green;  
  9. }   

Put the both file "simple.html" and "simple.less" inside the root folder of Node.js

Now, execute the following code: lessc simple.less simple.css

Less Less comment1

This will compile the "simple.less" file. A CSS file named "simple.css" will be generated.

For example:

Less Less comment2

The generated CSS "simple.css", has the following code:

  1. /* It displays the  
  2. red color! */  
  3. .myclass {  
  4.   color: red;  
  5. }  
  6. .myclass1 {  
  7.   color: green;  
  8. }   

Note: In the above code, you can see that only multiline comments are preserved in the generated CSS and single line comments are declined.

Output:

Less Less comment3