less Getting started with less Compiling a Less file from the command line

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

Example

lessc [options] <source> [destination]

The above command is used to compile Less files in the command line. Options are the various settings that the compiler should use either during compilation or after compilation. Options include -x or --compress for compressing or minifying the output CSS file, -sm=on or --strict-math=on for applying math operations only on values enclosed within parenthesis etc. The next comes the path of the source Less file that has to be compiled. Destination is the path and name of the output file. If this is not provided the output is printed out in the command line window itself.

Consider the below Less code

/* Filename: test.less */
#demo {
 color: @color;
 background: beige;
 width: 100% / 4;
}
@color: red;

Print compiled CSS in Command window:

When the following command is executed in the command line, the test.less file would be compiled and the output will be printed directly on the command window as no destination path is provided.

lessc test.less

Output:

#demo {
  color: red;
  background: beige;
  width: 25%;
}

Create a CSS file and write compiled output to the file:

The same file when compiled with the below statement will create a file named test.css in the same path as the test.less file and print/write the output to that CSS file.

lessc test.less > test.css

Create a CSS file and minify it:

The below command will print/write the output to a CSS file and also compress it at the end.

lessc -x test.less > test.css

Output:

#demo{color:red;background:beige;width:25%}

With Strict Math option enabled:

When the strict match option is enabled, the output will be as follows because the values for width is not enclosed within braces.

lessc -sm=on test.less > test.css

Output:

#demo {
  color: red;
  background: beige;
  width: 100% / 4;
}


Got any less Question?