How to Install Dart Sass in Linux?

Last Updated : 03 Jun, 2022

SASS or Syntactically Awesome Style Sheet is an upgrade over standard CSS and provides much-needed features that are missing from CSS like variables, operators, at-rules, nesting, mixins, inheritance, and much more. SASS files are used the .scss extension. Unfortunately, even modern browsers like chrome and Firebox can’t understand SASS syntax so, we use transpilers such as dart-sass to transpile or compile .scss to .css files. You can read more about SCSS by clicking here. Dart Sass is the primary implementation of Sass replacing the legacy Ruby SaaS. It’s fast, easy to install, and it compiles to pure JavaScript. Let’s discuss the most common ways to install dart-sass on any Linux distro. We will also see how to use sass to convert an SCSS file to a CSS file.

Installation on Dart Sass in Linux

From source code

Step 1: Download the latest release of Dart Sass by clicking here.

Step 2: Extract the tar file to /opt.

$ sudo tar -xvzf ~/Downloads/dart-sass-1.52.1-linux-x64.tar.gz -C /opt/

Step 3: Add export PATH=”/opt/dart-sass:$PATH” to the last line of the .bashrc/.zshrc.

$ echo ‘export PATH=”/opt/dart-sass:$PATH”‘ >> ~/.zshrc

Step 4: Save the changes to .bashrc/.zshrc by running

$ source ~/.zshrc

Step 5: Verify the installation

$ sass –version

From NPM

Step 1: Install SASS globally by executing the following command:

$ npm i -g sass

Step 2: Verify the installation process by running: sass –version

$ sass –version

Usage

We will create a basic HTML and.SCSS file for styling. Then we will use dart-sass to convert our scss file into a .css file, that a browser can understand

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>

CSS

$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; 
    } 
}