Skip to content
Related Articles
Get the best out of our app
Open App

Related Articles

How to Install Dart Sass in Linux?

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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




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


<!DOCTYPE html>
<html lang="en">
    <link rel="stylesheet" 
        <h1>Welcome to GeeksforGeeks.</h1>
        <a href="">


$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, compile the SCSS file using dart-sass.

$ sass input.scss:output.css

The style.css file is transpired from the scss file and is used in the HTML page.



My Personal Notes arrow_drop_up
Last Updated : 03 Jun, 2022
Like Article
Save Article
Similar Reads