Less CSS - SPLessons

Chapter 23

Comments for Less

Comments for Less

This chapter explains about comments for Less and its uses. And, this chapter gives an overview of Single line Comments and Multi line Comments for Less.

Both the inline and block-style comments can be used for less, which make the user to understand the code clearly. But, the main drawback is that the single line comments will not appear in the CSS file when compiled.

In Less, the comments can be added in the same way, as did while writing the CSS code. The following are the two types of comments in Less.

Single Line Comment

The single line comments are used to comment shortly at the end of a code and are represented with / /.
The snippet code below demonstrates the main scheme of Single Line Comments for Less.

//@keyframes foo {
from, to { width: 600px; }
50% { width: 700px; }
}
@keyframes bar {
from, to { height: 600px; }
50% { height: 700px; }
}

The first @keyframes declaration is commented by using / /.

Multi Line Comments

A lot of information can be inserted in the source code for easy programming using the Multi Line Comments. They are represented by (/*…….*/).
The snippet code below demonstrates the main scheme of Multi Line Comments for Less.

/* One hell of a block
style comment! */
@var: black;
// Get in line!
@var: red;

Example

The example below explains the use of Comments for Less.
The below conceptual diagram represents the overall view about the example like creating .html and .less files in node js folder and compiling .less to .css.
Create a simple HTML file in Nodejs folder as shown below.

Less_comments.html

<html>
<head>
<title>Less Comments Examples</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>LESS CSS Tutorials</h1>
<p class="myclass">Less comments is awesome.</p>
<p class="myclass1">One can use both the inline and block-style comments for less.</p>
</body>
</html>

Create a LESS file in the same Nodejs folder as shown below.

Style.less

/* It displays the
gray color! */
.myclass{
color: gray;
}
// It displays the blue color
.myclass1{
color: blue;
}

Compile the above Less file in the command prompt by using the following command.

lessc style.less style.css

By compiling the above less file, it automatically generates the following CSS code.

style.css

/* It displays the
gray color! */
.myclass {
color: gray;
}
.myclass1 {
color: blue;
}

After making all the required changes, run the html file in a browser to get the following output.

Summary

  • The single and multi-line comments are used to make the user understand the code clearly.
  • The single line comments don’t appear in CSS file, whereas the multi line comments appear.

  • Make sure that both the HTML and LESS files are created in the same node js folder.
  • Check all the required changes in the code before running the application.
  • Comments can be added for easy understanding and readability wherever required in the code.