Less - Comments

LESS - Comments

Description

Comments are essential for making code understandable and maintainable. LESS supports two types of comments, similar to JavaScript and other C-family languages:

• Block Comments: These start with /* and end with */. They can span multiple lines. Block comments are preserved and will appear in the compiled CSS output.
• Inline (or Single-Line) Comments: These start with // and continue to the end of the line. Inline comments are discarded during compilation and will NOT appear in the final CSS file. This makes them ideal for developer notes that aren’t meant for the end-user or production CSS.

Example

The following example demonstrates the use of both comment types in a LESS file and how they are treated during compilation.

HTML File (comments_example.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LESS Comments Example</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Demonstrating LESS Comments</h1>
    <p class="main-text">This paragraph will be styled with the primary color.</p>
    <p class="highlight-text">This paragraph uses a highlighted style.</p>
</body>
</html>

LESS File (style.less):

/*
  style.less
  This is a block comment at the top of the file.
  It will be included in the compiled CSS.
*/

@primary-color: #3498db;
@highlight-color: #e74c3c;

// Define base styling for paragraphs
// This comment will NOT appear in style.css
.main-text {
  color: @primary-color;
  font-weight: bold;
  /* Another block comment, inside a ruleset. This will also be preserved. */
}

.highlight-text {
  // Applying the highlight color
  color: @highlight-color;
  border: 1px solid darken(@highlight-color, 10%); // Using a LESS function
}

To compile style.less to style.css, you would typically use the LESS compiler from your terminal:

lessc style.less style.css

Compiled CSS File (style.css):

/*
  style.less
  This is a block comment at the top of the file.
  It will be included in the compiled CSS.
*/
.main-text {
  color: #3498db;
  font-weight: bold;
  /* Another block comment, inside a ruleset. This will also be preserved. */
}
.highlight-text {
  color: #e74c3c;
  border: 1px solid #d62c1a;
}

Output

To see how this works:

• Save the HTML code as comments_example.html.
• Save the LESS code as style.less in the same directory.
• Compile style.less to style.css using the command: lessc style.less style.css.
• Open comments_example.html in a web browser. You will see the styles applied, and if you inspect style.css, you’ll notice that only the block comments (/* ... */) are present, while the inline comments (// ...) have been removed.

This behavior allows developers to leave extensive notes and explanations in their LESS files without bloating the production CSS.