SASS –watch with automatic minify
Last Updated :
14 Feb, 2022
SASS is the abbreviation of Syntactically Awesome Style Sheets. It is a CSS pre-processor with syntax advancements. The stylesheets in this syntax are processed by a program and compiled into regular CSS style sheets, which can be used in the website. You can read more about SCSS by clicking here. In this tutorial, we will discuss the various methods to transpile .scss files to .css files using the SASS compiler.
Installing SASS: We will start by installing the SASS compiler using npm.
We can then install SASS by executing the following in the terminal:
npm i -g sass
To verify the installation process, one can run the following command:
sass --version
Example: We will create a basic HTML file that links to the style.css file for the styling of the page.
HTML Code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="style.css">
</head>
<body>
<div>
<h1>Welcome to GeeksforGeeks.</h1>
<br>
Visit
</a>
</div>
</body>
</html>
|
SCSS Code:
style.scss
$font-lg: 48px;
$font-sm: 24px;
$lightcolor: #359917;
$darkcolor: #126d12;
$pd: 18px 36px;
div {
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 10%;
}
h1 {
font-size: $font-lg;
}
a {
background-color: $lightcolor;
color: white;
font-size: $font-sm;
padding: $pd;
text-decoration: none;
&:hover {
background-color: $darkcolor;
}
&:active {
background-color: $darkcolor;
}
}
|
Next, we compile the SCSS file using the following SASS command.
sass input.scss:output.css
Output: The style.css file is transpile from the scss file and is used in the HTML page.
Automatic watching for changes: Suppose we want to change the background color of the document. We will first save the SCSS file, run the SASS transpiler and repeat the whole process for every single update. Wouldn’t this be waste of time and energy? This is where the –watch flag comes into the picture. This flag tells the sass transpiler to ‘watch’ the given file for any update/change and then automatically reflect the changes into the CSS file.
The below command makes SASS watch the input.scss file and keeps transpile the latest CSS code from the file.
sass --watch input.scss:output.css
Minifying the SASS file: We can use the –style flag with compressed as an argument to remove any extra space from the file. This writes the entire stylesheet on a single line. This produces a CSS file much small smaller in size, which results in improved loading time during production.
sass input.scss:output.css --watch --style compressed
Output:
- Automatically watching for changes in files along with minification
- The result of minifying the CSS file with the –style flag
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...