Less CSS - SPLessons

Comments for Less

Chapter 23

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Comments for Less

Comments for Less

shape Introduction

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.

shape Description

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

shape Description

The single line comments are used to comment shortly at the end of a code and are represented with / /.

shape Example

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

shape Description

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

shape Example

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;


shape Description

The example below explains the use of Comments for Less.

shape Conceptual

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.

shape Step 1

Create a simple HTML file in Nodejs folder as shown below.


<title>Less Comments Examples</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<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>

shape Step 2

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


/* It displays the
gray color! */
color: gray;
// It displays the blue color
color: blue;

shape Step 3

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

lessc style.less style.css

shape Step 4

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


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

shape Result

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


shape key Points

  • 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.

shape Programming

  • 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.