In this article, you are going to see how you can invoke the compiler from the command line in CSS. The problem here is CSS doesn’t have a compiler that can’t be compiled like some traditional programming languages. Because CSS is a declarative language that web browsers interpret to style HTML elements. But if we refer to CSS CSS preprocessors like Sass or Less, these languages need to be compiled into regular CSS before being used in web development.

So to actually invoke the compiler from the command line we have to either use LESS CSS code or compile it with LESS preprocessor. Or we have to write SASS CSS code and compile it with SASS preprocessor.

Approach 1:

The first approach is using the LESS preprocessor, and compiling the LESS CSS code using that preprocessor. When using this approach we have to install the LESS preprocessor using the npm package installer first. Then we have to compile the .less code file into a .css code file using the preprocessor.

Syntax:

To install LESS preprocessor in Windows:

npm install -g less

To install LESS preprocessor in Ubuntu:

sudo npm install -g less

To compile the .less code into .css code using preprocessor:

lessc input.less output.css

Installing LESS preprocessor using NPM on Ubuntu

Example: The code demonstrates how we can use the LESS preprocessor to compile the LESS code into CSS code and implement a basic CSS set of rules using it:

styles.less: This is compiled into a CSS file which is given further below.

style.css: The CSS output of the above less file was compiled.

HTML:

Output:

Approach 2:

The first approach is using the SASS preprocessor, and compiling the SASS CSS code using that preprocessor. When using this approach we have to install the SASS preprocessor using the npm package installer first. Then we have to compile the .sass code file into the .css code file using the preprocessor.

Syntax:

To install SASS preprocessor in Windows:

npm install -g sass

To install SASS preprocessor in Ubuntu:

sudo npm install -g sass 

After installing the preprocessor, compile the .sass code into .css code using the preprocessor:

sass input.sass output.css

Example: The code demonstrates how we can use the SASS preprocessor to compile the SASS code into CSS code and implement a basic CSS set of rules using it:

styles.sass: This is compiled into a CSS file which is given further below.

style.css: The CSS output of the above sass file was compiled.

HTML:

Output: