Skip to content
Related Articles

Related Articles

SASS –watch with automatic minify

View Discussion
Improve Article
Save Article
Like Article
  • 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>
        <a href="https://www.geeksforgeeks.org/">
              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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!