| A pure JavaScript implementation of [Sass][sass]. **Sass makes CSS fun again**. |
| |
| <table> |
| <tr> |
| <td> |
| <img width="118px" alt="Sass logo" src="https://rawgit.com/sass/sass-site/master/source/assets/img/logos/logo.svg" /> |
| </td> |
| <td valign="middle"> |
| <a href="https://www.npmjs.com/package/sass"><img width="100%" alt="npm statistics" src="https://nodei.co/npm/sass.png?downloads=true"></a> |
| </td> |
| <td valign="middle"> |
| <a href="https://travis-ci.org/sass/dart-sass"><img alt="Travis build status" src="https://api.travis-ci.org/sass/dart-sass.svg?branch=master"></a> |
| <br> |
| <a href="https://ci.appveyor.com/project/nex3/dart-sass"><img alt="Appveyor build status" src="https://ci.appveyor.com/api/projects/status/84rl9hvu8uoecgef?svg=true"></a> |
| </td> |
| </tr> |
| </table> |
| |
| [sass]: https://sass-lang.com/ |
| |
| This package is a distribution of [Dart Sass][], compiled to pure JavaScript |
| with no native code or external dependencies. It provides a command-line `sass` |
| executable and a Node.js API. |
| |
| [Dart Sass]: https://github.com/sass/dart-sass |
| |
| * [Usage](#usage) |
| * [API](#api) |
| * [See Also](#see-also) |
| * [Behavioral Differences from Ruby Sass](#behavioral-differences-from-ruby-sass) |
| |
| ## Usage |
| |
| You can install Sass globally using `npm install -g sass` which will provide |
| access to the `sass` executable. You can also add it to your project using |
| `npm install --save-dev sass`. This provides the executable as well as a |
| library: |
| |
| [npm]: https://www.npmjs.com/package/sass |
| |
| ```js |
| var sass = require('sass'); |
| |
| sass.render({file: scss_filename}, function(err, result) { /* ... */ }); |
| |
| // OR |
| |
| var result = sass.renderSync({file: scss_filename}); |
| ``` |
| |
| [See below](#api) for details on Dart Sass's JavaScript API. |
| |
| ## API |
| |
| When installed via npm, Dart Sass supports a JavaScript API that's fully |
| compatible with [Node Sass][] (with a few exceptions listed below), with support |
| for both the `render()` and `renderSync()` functions. See [the Sass |
| website][js api] for full API documentation! |
| |
| [Node Sass]: https://github.com/sass/node-sass |
| [js api]: https://sass-lang.com/documentation/js-api |
| |
| 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`][fibers] package to call |
| asynchronous importers from the synchronous code path. To enable this, pass the |
| `Fiber` class to the `fiber` option: |
| |
| [fibers]: https://www.npmjs.com/package/fibers |
| |
| ```js |
| var sass = require("sass"); |
| var Fiber = require("fibers"); |
| |
| sass.render({ |
| file: "input.scss", |
| importer: function(url, prev, done) { |
| // ... |
| }, |
| fiber: Fiber |
| }, function(err, result) { |
| // ... |
| }); |
| ``` |
| |
| Both `render()` and `renderSync()` support the following options: |
| |
| * [`data`](https://github.com/sass/node-sass#data) |
| * [`file`](https://github.com/sass/node-sass#file) |
| * [`functions`](https://github.com/sass/node-sass#functions--v300---experimental) |
| * [`importer`](https://github.com/sass/node-sass#importer--v200---experimental) |
| * [`includePaths`](https://github.com/sass/node-sass#includepaths) |
| * [`indentType`](https://github.com/sass/node-sass#indenttype) |
| * [`indentWidth`](https://github.com/sass/node-sass#indentwidth) |
| * [`indentedSyntax`](https://github.com/sass/node-sass#indentedsyntax) |
| * [`linefeed`](https://github.com/sass/node-sass#linefeed) |
| * [`omitSourceMapUrl`](https://github.com/sass/node-sass#omitsourcemapurl) |
| * [`outFile`](https://github.com/sass/node-sass#outfile) |
| * [`sourceMapContents`](https://github.com/sass/node-sass#sourcemapcontents) |
| * [`sourceMapEmbed`](https://github.com/sass/node-sass#sourcemapembed) |
| * [`sourceMapRoot`](https://github.com/sass/node-sass#sourcemaproot) |
| * [`sourceMap`](https://github.com/sass/node-sass#sourcemap) |
| * Only the `"expanded"` and `"compressed"` values of |
| [`outputStyle`](https://github.com/sass/node-sass#outputstyle) are supported. |
| |
| No support is intended for the following options: |
| |
| * [`precision`](https://github.com/sass/node-sass#precision). Dart Sass defaults |
| to a sufficiently high precision for all existing browsers, and making this |
| customizable would make the code substantially less efficient. |
| |
| * [`sourceComments`](https://github.com/sass/node-sass#sourcecomments). Source |
| maps are the recommended way of locating the origin of generated selectors. |
| |
| ## See Also |
| |
| * [Dart Sass][], from which this package is compiled, can be used either as a |
| stand-alone executable or as a Dart library. Running Dart Sass on the Dart VM |
| is substantially faster than running the pure JavaScript version, so this may |
| be appropriate for performance-sensitive applications. The Dart API is also |
| (currently) more user-friendly than the JavaScript API. See |
| [the Dart Sass README][Using Dart Sass] for details on how to use it. |
| |
| * [Node Sass][], which is a wrapper around [LibSass][], the C++ implementation |
| of Sass. Node Sass supports the same API as this package and is also faster |
| (although it's usually a little slower than Dart Sass). However, it requires a |
| native library which may be difficult to install, and it's generally slower to |
| add features and fix bugs. |
| |
| [Using Dart Sass]: https://github.com/sass/dart-sass#using-dart-sass |
| [Node Sass]: https://www.npmjs.com/package/node-sass |
| [LibSass]: https://sass-lang.com/libsass |
| |
| ## Behavioral Differences from Ruby Sass |
| |
| There are a few intentional behavioral differences between Dart Sass and Ruby |
| Sass. These are generally places where Ruby Sass has an undesired behavior, and |
| it's substantially easier to implement the correct behavior than it would be to |
| implement compatible behavior. These should all have tracking bugs against Ruby |
| Sass to update the reference behavior. |
| |
| 1. `@extend` only accepts simple selectors, as does the second argument of |
| `selector-extend()`. See [issue 1599][]. |
| |
| 2. Subject selectors are not supported. See [issue 1126][]. |
| |
| 3. Pseudo selector arguments are parsed as `<declaration-value>`s rather than |
| having a more limited custom parsing. See [issue 2120][]. |
| |
| 4. The numeric precision is set to 10. See [issue 1122][]. |
| |
| 5. The indented syntax parser is more flexible: it doesn't require consistent |
| indentation across the whole document. See [issue 2176][]. |
| |
| 6. Colors do not support channel-by-channel arithmetic. See [issue 2144][]. |
| |
| 7. Unitless numbers aren't `==` to unit numbers with the same value. In |
| addition, map keys follow the same logic as `==`-equality. See |
| [issue 1496][]. |
| |
| 8. `rgba()` and `hsla()` alpha values with percentage units are interpreted as |
| percentages. Other units are forbidden. See [issue 1525][]. |
| |
| 9. Too many variable arguments passed to a function is an error. See |
| [issue 1408][]. |
| |
| 10. Allow `@extend` to reach outside a media query if there's an identical |
| `@extend` defined outside that query. This isn't tracked explicitly, because |
| it'll be irrelevant when [issue 1050][] is fixed. |
| |
| 11. Some selector pseudos containing placeholder selectors will be compiled |
| where they wouldn't be in Ruby Sass. This better matches the semantics of |
| the selectors in question, and is more efficient. See [issue 2228][]. |
| |
| 12. The old-style `:property value` syntax is not supported in the indented |
| syntax. See [issue 2245][]. |
| |
| 13. The reference combinator is not supported. See [issue 303][]. |
| |
| 14. Universal selector unification is symmetrical. See [issue 2247][]. |
| |
| 15. `@extend` doesn't produce an error if it matches but fails to unify. See |
| [issue 2250][]. |
| |
| 16. Dart Sass currently only supports UTF-8 documents. We'd like to support |
| more, but Dart currently doesn't support them. See [dart-lang/sdk#11744][], |
| for example. |
| |
| [issue 1599]: https://github.com/sass/sass/issues/1599 |
| [issue 1126]: https://github.com/sass/sass/issues/1126 |
| [issue 2120]: https://github.com/sass/sass/issues/2120 |
| [issue 1122]: https://github.com/sass/sass/issues/1122 |
| [issue 2176]: https://github.com/sass/sass/issues/2176 |
| [issue 2144]: https://github.com/sass/sass/issues/2144 |
| [issue 1496]: https://github.com/sass/sass/issues/1496 |
| [issue 1525]: https://github.com/sass/sass/issues/1525 |
| [issue 1408]: https://github.com/sass/sass/issues/1408 |
| [issue 1050]: https://github.com/sass/sass/issues/1050 |
| [issue 2228]: https://github.com/sass/sass/issues/2228 |
| [issue 2245]: https://github.com/sass/sass/issues/2245 |
| [issue 303]: https://github.com/sass/sass/issues/303 |
| [issue 2247]: https://github.com/sass/sass/issues/2247 |
| [issue 2250]: https://github.com/sass/sass/issues/2250 |
| [dart-lang/sdk#11744]: https://github.com/dart-lang/sdk/issues/11744 |
| |
| Disclaimer: this is not an official Google product. |