sass-site/source/dart-sass.md

3.8 KiB

layout title no_container introduction
has_no_sidebars Dart Sass true Dart Sass is the primary implementation of Sass, which means it gets new features before any other implementation. It's fast, easy to install, and it compiles to pure JavaScript which makes it easy to integrate into modern web development workflows. Find out more or help out with its development on [GitHub](https://github.com/sass/dart-sass).

Command Line

Dart Sass's stand-alone command-line executable uses the blazing-fast Dart VM to compile your stylesheets. To install Dart Sass on the command line, check out the installation instructions. Once you've got it running, you can use it compile files:

sass source/index.scss css/index.css

See sass --help for additional information on the command-line interface.

Dart Library

You can also use Dart Sass as a Dart library to get the speed of the Dart VM plus the ability to define your own functions and importers. To add it to an existing project:

  1. Install the Dart SDK. Make sure its bin directory is on your PATH.

  2. Create a pubspec.yaml file like this:

name: my_project
dev_dependencies:
  sass: ^{{ releases['dart-sass'].version }}
  1. Run dart pub get.

  2. Create a compile-sass.dart file like this:

import 'dart:io';
import 'package:sass/sass.dart' as sass;

void main(List<String> arguments) {
  var result = sass.compile(arguments[0]);
  new File(arguments[1]).writeAsStringSync(result);
}
  1. You can now use this to compile files:
dart compile-sass.dart styles.scss styles.css
  1. Learn more about writing Dart code (it's easy!) and about Sass's Dart API.

JavaScript Library

Dart Sass is also distributed as the pure JavaScript sass package on npm. The pure JS version is slower than the stand-alone executable, but it's easy to integrate into existing workflows and it allows you to define custom functions and importers in JavaScript. You can add it to your project using npm install --save-dev sass and require() it as a library:

var sass = require('sass');

sass.render(
  {
    file: scss_filename,
  },
  function (err, result) {
    /* ... */
  },
);

// OR

var result = sass.renderSync({
  file: scss_filename,
});

When installed via npm, Dart Sass supports a JavaScript API that aims to be compatible with Node Sass. Full compatibility is a work in progress, but Dart Sass currently supports the render() and renderSync() functions. Note however that by default, renderSync() is more than twice as fast as render(), due to the overhead of asynchronous callbacks.

To avoid this performance hit, render() can use the fibers package to call asynchronous importers from the synchronous code path. To enable this, pass the Fiber class to the fiber option:

var sass = require('sass');
var Fiber = require('fibers');

sass.render(
  {
    file: 'input.scss',
    importer: function (url, prev, done) {
      // ...
    },
    fiber: Fiber,
  },
  function (err, result) {
    // ...
  },
);

See Dart Sass's documentation for more information about its JavaScript API.