8d96d90cbd9d66c7974818a383e8192a4ae61c97bc014aa8a95ee6f7c4ffe5339d468a165aa656fc32065b7b2a73ce6089c3afca5113ddb07cb00c90dc4beb 7.2 KB

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