mirror of
https://github.com/danog/sass-site.git
synced 2024-11-27 04:24:50 +01:00
106 lines
3.6 KiB
Plaintext
106 lines
3.6 KiB
Plaintext
---
|
|
title: Dart Sass
|
|
no_container: true
|
|
introduction: >
|
|
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).
|
|
---
|
|
|
|
.sl-l-grid.sl-l-grid--full.sl-l-large-grid--fit.sl-l-large-grid--gutters-large
|
|
.sl-l-grid__column
|
|
:markdown
|
|
## 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 #{link_to "installation instructions", "/install"}. Once
|
|
you've got it running, you can use it compile files:
|
|
|
|
```sh
|
|
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][install]. Make sure its `bin` directory is [on
|
|
your `PATH`][path].
|
|
|
|
[install]: https://www.dartlang.org/install#automated-installation-and-updates
|
|
[path]: https://katiek2.github.io/path-doc/
|
|
|
|
2. Create a `pubspec.yaml` file like this:
|
|
|
|
```yaml
|
|
name: my_project
|
|
dev_dependencies:
|
|
sass: ^#{impl_version(:dart)}
|
|
```
|
|
|
|
3. Run `dart pub get`.
|
|
|
|
4. Create a `compile-sass.dart` file like this:
|
|
|
|
```dart
|
|
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);
|
|
}
|
|
```
|
|
|
|
5. You can now use this to compile files:
|
|
|
|
```sh
|
|
dart compile-sass.dart styles.scss styles.css
|
|
```
|
|
|
|
6. Learn more about [writing Dart code][dart] (it's easy!) and about
|
|
[Sass's Dart API][sass].
|
|
|
|
[dart]: https://www.dartlang.org/guides/language/language-tour
|
|
[sass]: https://pub.dev/documentation/sass/latest/sass/compileToResult.html
|
|
|
|
.sl-l-grid__column
|
|
:markdown
|
|
## JavaScript Library
|
|
|
|
Dart Sass is also distributed as the pure JavaScript [`sass`
|
|
package](https://npmjs.com/package/sass) 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:
|
|
|
|
```js
|
|
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.
|
|
|
|
[brand new JavaScript API]: https://sass-lang.com/documentation/js-api/
|
|
[legacy API]: https://sass-lang.com/documentation/js-api/#legacy-api
|