LESS - Comments

Description

Comments make the code clear and understandable for the users. You can use both the block style and the inline comments in the code, but when you compile the LESS code, the single line comments will not appear in the CSS file.

Example

The following example demonstrates the use of comments in the LESS file −

<html>
   <head>
      <title>Less Comments</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>

   <body>
      <h1>Example using Comments</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
      <p class = "myclass1">It allows reusing CSS code and 
      writing LESS code with same semantics.</p>
   </body>
</html>

Now create the style.less file.

style.less

/* It displays the
green color! */
.myclass {
   color: green;
}

// It displays the blue color
.myclass1 {
   color: red;
}

You can compile the style.less file to style.css by using the following command −

lessc style.less style.css

Now execute the above command; it will create the style.css file automatically with the following code −

style.css

/* It displays the
green color! */
.myclass {
   color: green;
}

.myclass1 {
   color: red;
}

Output

Follow these steps to see how the above code works −

  • Save the above html code in the comments.html file.

  • Open this HTML file in a browser, the following output will get displayed.

Less Comments
Advertisements