How to Invoke the Compiler From the Command Line ?
Last Updated :
01 Aug, 2023
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.
CSS
@body-bg-color: #eeeeee;
@text-color: rgb(80, 20, 20);
@container-bg: rgb(0, 200, 100);
body {
background: @body-bg-color;
}
.container{
height:200px;
width:580px;
padding: 30px 0px 0px 25px;
background-color: @container-bg;
color: @text-color;
margin: 2rem;
}
|
style.css: The CSS output of the above less file was compiled.
CSS
body {
background: #eeeeee;
}
.container {
height: 200px;
width: 580px;
padding: 30px 0px 0px 25px;
background-color: #00c864;
color: #501414;
margin: 2rem;
}
|
HTML:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="style.css" />
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>
<b>
Explain how you can invoke the
compiler from the command line?
</b>
</h3>
<div class="container">
<p>Width: 580px</p>
</div>
</body>
</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.
CSS
$body-bg-color: #eeeeee
$text-color: rgb(2, 0, 121)
$container-bg: rgb(166, 221, 95)
body
background: $body-bg-color
.container
height:200px
width:580px
padding: 30px 0px 0px 25px
background-color: $container-bg
color: $text-color
margin: 2rem
|
style.css: The CSS output of the above sass file was compiled.
CSS
body {
background: #eeeeee;
}
.container {
height: 200px;
width: 580px;
padding: 30px 0px 0px 25px;
background-color: rgb(166, 221, 95);
color: rgb(2, 0, 121);
margin: 2rem;
}
|
HTML:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="style.css" />
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>
<b>
Explain how you can invoke the
compiler from the command line?
</b>
</h3>
<div class="container">
<p>Width: 580px</p>
</div>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...