[0c6b92a] | 1 | A pure JavaScript implementation of [Sass][sass]. **Sass makes CSS fun again**.
|
---|
| 2 |
|
---|
| 3 | <table>
|
---|
| 4 | <tr>
|
---|
| 5 | <td>
|
---|
| 6 | <img width="118px" alt="Sass logo" src="https://rawgit.com/sass/sass-site/master/source/assets/img/logos/logo.svg" />
|
---|
| 7 | </td>
|
---|
| 8 | <td valign="middle">
|
---|
| 9 | <a href="https://www.npmjs.com/package/sass"><img width="100%" alt="npm statistics" src="https://nodei.co/npm/sass.png?downloads=true"></a>
|
---|
| 10 | </td>
|
---|
| 11 | <td valign="middle">
|
---|
| 12 | <a href="https://github.com/sass/dart-sass/actions"><img alt="GitHub actions build status" src="https://github.com/sass/dart-sass/workflows/CI/badge.svg"></a>
|
---|
| 13 | <br>
|
---|
| 14 | <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>
|
---|
| 15 | </td>
|
---|
| 16 | </tr>
|
---|
| 17 | </table>
|
---|
| 18 |
|
---|
| 19 | [sass]: https://sass-lang.com/
|
---|
| 20 |
|
---|
| 21 | This package is a distribution of [Dart Sass][], compiled to pure JavaScript
|
---|
| 22 | with no native code or external dependencies. It provides a command-line `sass`
|
---|
| 23 | executable and a Node.js API.
|
---|
| 24 |
|
---|
| 25 | [Dart Sass]: https://github.com/sass/dart-sass
|
---|
| 26 |
|
---|
| 27 | * [Usage](#usage)
|
---|
| 28 | * [See Also](#see-also)
|
---|
| 29 | * [Behavioral Differences from Ruby Sass](#behavioral-differences-from-ruby-sass)
|
---|
| 30 |
|
---|
| 31 | ## Usage
|
---|
| 32 |
|
---|
| 33 | You can install Sass globally using `npm install -g sass` which will provide
|
---|
| 34 | access to the `sass` executable. You can also add it to your project using
|
---|
| 35 | `npm install --save-dev sass`. This provides the executable as well as a
|
---|
| 36 | library:
|
---|
| 37 |
|
---|
| 38 | [npm]: https://www.npmjs.com/package/sass
|
---|
| 39 |
|
---|
| 40 | ```js
|
---|
| 41 | const sass = require('sass');
|
---|
| 42 |
|
---|
| 43 | const result = sass.compile(scssFilename);
|
---|
| 44 |
|
---|
| 45 | // OR
|
---|
| 46 |
|
---|
| 47 | // Note that `compileAsync()` is substantially slower than `compile()`.
|
---|
| 48 | const result = await sass.compileAsync(scssFilename);
|
---|
| 49 | ```
|
---|
| 50 |
|
---|
| 51 | See [the Sass website][js api] for full API documentation.
|
---|
| 52 |
|
---|
| 53 | [js api]: https://sass-lang.com/documentation/js-api
|
---|
| 54 |
|
---|
| 55 | ### Legacy API
|
---|
| 56 |
|
---|
| 57 | Dart Sass also supports an older JavaScript API that's fully compatible with
|
---|
| 58 | [Node Sass] (with a few exceptions listed below), with support for both the
|
---|
| 59 | [`render()`] and [`renderSync()`] functions. This API is considered deprecated
|
---|
| 60 | and will be removed in Dart Sass 2.0.0, so it should be avoided in new projects.
|
---|
| 61 |
|
---|
| 62 | [Node Sass]: https://github.com/sass/node-sass
|
---|
| 63 | [`render()`]: https://sass-lang.com/documentation/js-api/functions/render
|
---|
| 64 | [`renderSync()`]: https://sass-lang.com/documentation/js-api/functions/renderSync
|
---|
| 65 |
|
---|
| 66 | Sass's support for the legacy JavaScript API has the following limitations:
|
---|
| 67 |
|
---|
| 68 | * Only the `"expanded"` and `"compressed"` values of [`outputStyle`] are
|
---|
| 69 | supported.
|
---|
| 70 |
|
---|
| 71 | * Dart Sass doesn't support the [`precision`] option. Dart Sass defaults to a
|
---|
| 72 | sufficiently high precision for all existing browsers, and making this
|
---|
| 73 | customizable would make the code substantially less efficient.
|
---|
| 74 |
|
---|
| 75 | * Dart Sass doesn't support the [`sourceComments`] option. Source maps are the
|
---|
| 76 | recommended way of locating the origin of generated selectors.
|
---|
| 77 |
|
---|
| 78 | [`outputStyle`]: https://sass-lang.com/documentation/js-api/interfaces/LegacySharedOptions#outputStyle
|
---|
| 79 | [`precision`]: https://github.com/sass/node-sass#precision
|
---|
| 80 | [`sourceComments`]: https://github.com/sass/node-sass#sourcecomments
|
---|
| 81 |
|
---|
| 82 | ## See Also
|
---|
| 83 |
|
---|
| 84 | * [Dart Sass][], from which this package is compiled, can be used either as a
|
---|
| 85 | stand-alone executable or as a Dart library. Running Dart Sass on the Dart VM
|
---|
| 86 | is substantially faster than running the pure JavaScript version, so this may
|
---|
| 87 | be appropriate for performance-sensitive applications. The Dart API is also
|
---|
| 88 | (currently) more user-friendly than the JavaScript API. See
|
---|
| 89 | [the Dart Sass README][Using Dart Sass] for details on how to use it.
|
---|
| 90 |
|
---|
| 91 | * [Node Sass][], which is a wrapper around [LibSass][], the C++ implementation
|
---|
| 92 | of Sass. Node Sass supports the same API as this package and is also faster
|
---|
| 93 | (although it's usually a little slower than Dart Sass). However, it requires a
|
---|
| 94 | native library which may be difficult to install, and it's generally slower to
|
---|
| 95 | add features and fix bugs.
|
---|
| 96 |
|
---|
| 97 | [Using Dart Sass]: https://github.com/sass/dart-sass#using-dart-sass
|
---|
| 98 | [Node Sass]: https://www.npmjs.com/package/node-sass
|
---|
| 99 | [LibSass]: https://sass-lang.com/libsass
|
---|
| 100 |
|
---|
| 101 | ## Behavioral Differences from Ruby Sass
|
---|
| 102 |
|
---|
| 103 | There are a few intentional behavioral differences between Dart Sass and Ruby
|
---|
| 104 | Sass. These are generally places where Ruby Sass has an undesired behavior, and
|
---|
| 105 | it's substantially easier to implement the correct behavior than it would be to
|
---|
| 106 | implement compatible behavior. These should all have tracking bugs against Ruby
|
---|
| 107 | Sass to update the reference behavior.
|
---|
| 108 |
|
---|
| 109 | 1. `@extend` only accepts simple selectors, as does the second argument of
|
---|
| 110 | `selector-extend()`. See [issue 1599][].
|
---|
| 111 |
|
---|
| 112 | 2. Subject selectors are not supported. See [issue 1126][].
|
---|
| 113 |
|
---|
| 114 | 3. Pseudo selector arguments are parsed as `<declaration-value>`s rather than
|
---|
| 115 | having a more limited custom parsing. See [issue 2120][].
|
---|
| 116 |
|
---|
| 117 | 4. The numeric precision is set to 10. See [issue 1122][].
|
---|
| 118 |
|
---|
| 119 | 5. The indented syntax parser is more flexible: it doesn't require consistent
|
---|
| 120 | indentation across the whole document. See [issue 2176][].
|
---|
| 121 |
|
---|
| 122 | 6. Colors do not support channel-by-channel arithmetic. See [issue 2144][].
|
---|
| 123 |
|
---|
| 124 | 7. Unitless numbers aren't `==` to unit numbers with the same value. In
|
---|
| 125 | addition, map keys follow the same logic as `==`-equality. See
|
---|
| 126 | [issue 1496][].
|
---|
| 127 |
|
---|
| 128 | 8. `rgba()` and `hsla()` alpha values with percentage units are interpreted as
|
---|
| 129 | percentages. Other units are forbidden. See [issue 1525][].
|
---|
| 130 |
|
---|
| 131 | 9. Too many variable arguments passed to a function is an error. See
|
---|
| 132 | [issue 1408][].
|
---|
| 133 |
|
---|
| 134 | 10. Allow `@extend` to reach outside a media query if there's an identical
|
---|
| 135 | `@extend` defined outside that query. This isn't tracked explicitly, because
|
---|
| 136 | it'll be irrelevant when [issue 1050][] is fixed.
|
---|
| 137 |
|
---|
| 138 | 11. Some selector pseudos containing placeholder selectors will be compiled
|
---|
| 139 | where they wouldn't be in Ruby Sass. This better matches the semantics of
|
---|
| 140 | the selectors in question, and is more efficient. See [issue 2228][].
|
---|
| 141 |
|
---|
| 142 | 12. The old-style `:property value` syntax is not supported in the indented
|
---|
| 143 | syntax. See [issue 2245][].
|
---|
| 144 |
|
---|
| 145 | 13. The reference combinator is not supported. See [issue 303][].
|
---|
| 146 |
|
---|
| 147 | 14. Universal selector unification is symmetrical. See [issue 2247][].
|
---|
| 148 |
|
---|
| 149 | 15. `@extend` doesn't produce an error if it matches but fails to unify. See
|
---|
| 150 | [issue 2250][].
|
---|
| 151 |
|
---|
| 152 | 16. Dart Sass currently only supports UTF-8 documents. We'd like to support
|
---|
| 153 | more, but Dart currently doesn't support them. See [dart-lang/sdk#11744][],
|
---|
| 154 | for example.
|
---|
| 155 |
|
---|
| 156 | [issue 1599]: https://github.com/sass/sass/issues/1599
|
---|
| 157 | [issue 1126]: https://github.com/sass/sass/issues/1126
|
---|
| 158 | [issue 2120]: https://github.com/sass/sass/issues/2120
|
---|
| 159 | [issue 1122]: https://github.com/sass/sass/issues/1122
|
---|
| 160 | [issue 2176]: https://github.com/sass/sass/issues/2176
|
---|
| 161 | [issue 2144]: https://github.com/sass/sass/issues/2144
|
---|
| 162 | [issue 1496]: https://github.com/sass/sass/issues/1496
|
---|
| 163 | [issue 1525]: https://github.com/sass/sass/issues/1525
|
---|
| 164 | [issue 1408]: https://github.com/sass/sass/issues/1408
|
---|
| 165 | [issue 1050]: https://github.com/sass/sass/issues/1050
|
---|
| 166 | [issue 2228]: https://github.com/sass/sass/issues/2228
|
---|
| 167 | [issue 2245]: https://github.com/sass/sass/issues/2245
|
---|
| 168 | [issue 303]: https://github.com/sass/sass/issues/303
|
---|
| 169 | [issue 2247]: https://github.com/sass/sass/issues/2247
|
---|
| 170 | [issue 2250]: https://github.com/sass/sass/issues/2250
|
---|
| 171 | [dart-lang/sdk#11744]: https://github.com/dart-lang/sdk/issues/11744
|
---|
| 172 |
|
---|
| 173 | Disclaimer: this is not an official Google product.
|
---|