Using Sass (Scss) in Dart project

Friday, June 20, 2014

Recently I'm trying to configure Dart development environment like everyday I do with JS Grunt (or Gulp).

Dart has a default tool to get the work done -- Pub. Pub is not just for Package manager like bower. The `pub serve` and `pub build` are like `grunt serve` and `grunt build`.

In the grunt tasks you can define actual sequences of tasks. While Pub has a more conventional way to get the similar stuff done. The Pub Transformer can process some transformations in the build. Dart to JS transformation is the typical one as explained the introduction of Pub on CSS preprocessing is another typical one and I'd like to introduce the example in this post.

There are two popular CSS pre-processors -- Sass(Scss) and Less. Here I'd like to introduce Sass example.
There is already a nice Sass(Scss) transformation package and the examples at my github repo  You can try and confirm how it works.

You get the git clone, and do `pub serve` where pubspec.yaml exists. Then open http://localhost:8080 on your Dartium. The transformer runs on the startup and you can see the "Build completed successfully" message on your console.
You don't see any output CSS files in the directories, since they are included into the pub dev server, but not put in the project directories.

And don't worry, every time you save the source code, Pub watches the changes and automatically runs the transformation again.

That's it. Pretty easy.

By the way, actually I prefer to use Less for my development, not Sass. So next time I would try Less transformation.


  1. The sample is not working, it sends me this two errors

    Command: sass --no-cache --scss -I web -I web/styles -I web/styles -I web -I web
    Build completed with 1 errors.
    [Sass on dart_sass_example|web/styles/sub_dir.scss]:
    error: ProcessException: The system cannot find the file specified.

    Command: sass --no-cache --scss -I web -I web/styles -I web/styles -I web -I web -I web/styles
    Build completed with 1 errors.