Getting Started with Dart SASS | Task

Ole Ersoy
Aug - 17  -  1 min

Scenario

We wish to compile the following SASS code and watch for changes.

@mixin fs-typography {
    #{if(&, '&', 'body')} {
        color: red;
    }
}
@include fs-typography();

Approach

Install SASS globally.

npm i -g sass
sass --version
1.54.4 compiled with dart2js 2.17.6

The above version of Dart SASS is now installed globally.

Create a project directory and an example file that we will compile.

mkdir -p sass-example/src/scss
cd sass-example
touch src/scss/example.scss
code .

Paste the sass content into example.scss.

Now run.

sass --watch src/scss:dist/css

This will compile example.scss and place the compiled content into dist/css/example.css.

The result of the compilation is.

body {
   color: red;
}