3 simple steps for Sass in your Dart project

I really like Sass and I can't imagine writing css without it. With Sass you can use variables, mixins, nest your css and do lots of things in css.

So why not use Sass in your Dart project? It's really easy. 

You need to have Sass installed and available on the path. For how to check the official website.

And now add Sass to your Dart project:

1) Install Sass package

Find Sass package on pub. Here it is: https://pub.dartlang.org/packages/sass.

2) Update pubspec.yaml

Add Sass dependency in your project's pubspec.yaml. Don't forget to add transformers too:

name: super_cute_app
description: My super cute app!
dependencies:
  …
  sass: any
transformers:
- sass

And then run pub get.

3) Use it 

Now you can create and use .sass and .scss files in your project and these files will be automatically transformed to corresponding .css files.

This package has also some more options.

Bonus: Live reload

Do you know Live reload? No? I am using this tool with css/Sass in my projects.

It monitors changes in your file system. When you change the (css or Sass) file, the connected web browser is refreshed. So I don’t have to do manual browser refresh after every change in my stylesheets.


And that's all for today and I hope you now enjoy Sass in your Dart project! :-)