Dart Sass
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.
Command LineCommand Line permalink
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 LibraryDart Library permalink
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:
-
Install the Dart SDK. Make sure its
bin
directory is on yourPATH
. -
Create a
pubspec.yaml
file like this:
name: my_project
dev_dependencies:
sass: ^1.81.0
-
Run
dart pub get
. -
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.compileToResult(arguments[0]);
new File(arguments[1]).writeAsStringSync(result.css);
}
- You can now use this to compile files:
dart compile-sass.dart styles.scss styles.css
-
Learn more about writing Dart code (it’s easy!) and about Sass’s Dart API.
JavaScript LibraryJavaScript Library permalink
Dart Sass is also distributed as the pure JavaScript sass
package and
sass-embedded
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:
const sass = require('sass');
const result = sass.compile('style.scss');
console.log(result.css);
// OR
const result = await sass.compileAsync('style.scss');
console.log(result.css);
When installed via npm, Dart Sass supports a brand new JavaScript API, as well
as a legacy API that’s fully compatible with the old Node Sass API. Note that
when using the sass
package, the synchronous API functions are more than twice
as fast as the asynchronous API, due to the overhead of asynchronous callbacks.
Embedded Dart SassEmbedded Dart Sass permalink
Dart Sass also supports the Embedded Sass protocol, which allows any programming language to communicate directly with the Dart VM to run Sass compilation, including custom function and importer support. This has two major benefits:
-
It makes it easy to create a wrapper library for Dart Sass for any programming language that can run a subprocess.
-
The Dart VM is very fast, so this provides a substantial performance boost even for JavaScript where the native
sass
package is available.
The following Embedded Sass wrapper packages are available. If you have another one to add, please send a pull request!
-
Node.js: The
sass-embedded
package is maintained by the Sass team, and supports the same official Sass JavaScript API as the native-JSsass
package. -
Go: The
github.com/bep/godartsass
package runs Embedded Sass and supports the Hugo static site generator. -
Java: The
de.larsgrefer.sass
package runs Embedded Sass in Java. -
Ruby: The
sass-embedded
gem is maintained by frequent Sass contributor なつき. -
Rust: The
sass-embedded
crate runs Embedded Sass in Rust.