sass 1.1.1

  • README.md
  • CHANGELOG.md
  • Installing
  • Versions
  • 83

A Dart implementation of Sass. Sass makes CSS fun again.

Sass logo npm statistics Pub version
Travis build status
Appveyor build status

Using Dart Sass

There are a few different ways to install and run Dart Sass, depending on your environment and your needs.

From Chocolatey (Windows)

If you use the Chocolatey package manager for Windows, you can install Dart Sass by running

choco install sass -prerelease

That'll give you a sass executable on your command line that will run Dart Sass.

From Homebrew (OS X)

If you use the Homebrew package manager for Mac OS X, you can install Dart Sass by running

brew install --devel sass/sass/sass

That'll give you a sass executable on your command line that will run Dart Sass.

Standalone

You can download the standalone Dart Sass archive for your operating system—containing the Dart VM and the snapshot of the Sass library—from the release page. Extract it, add the directory to your path, and the dart-sass executable is ready to run!

To add the directory to your path on Windows, open the Control Panel, then search for and select "edit environment variables". Find the variable named PATH, click Edit, add ;C:\path\to\dart-sass to the end of the value, then click OK.

On more Unix-y systems, edit your shell configuration file (usually ~/.bashrc or ~/.profile) and add at the end:

export PATH=$PATH:/path/to/dart-sass

Regardless of your OS, you'll need to restart your terminal in order for this configuration to take effect.

From npm

Dart Sass is available, compiled to JavaScript, as an npm package. You can install it 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:

var sass = require('sass');

sass.render({file: scss_filename}, function(err, result) { /* ... */ });

// OR

var result = sass.renderSync({file: scss_filename});

See below for details on Dart Sass's JavaScript API.

From Pub

If you're a Dart user, you can install Dart Sass globally using pub global activate sass ^1.0.0-alpha, which will provide a dart-sass executable. You can also add it to your pubspec and use it as a library. We strongly recommend importing it with the prefix sass:

import 'package:sass/sass.dart' as sass;

void main(List<String> args) {
  print(sass.compile(args.first));
}

See the Dart API docs for details.

From Source

Assuming you've already checked out this repository:

  1. Install Dart. If you download an archive manually rather than using an installer, make sure the SDK's bin directory is on your PATH.

  2. In this repository, run pub get. This will install Dart Sass's dependencies.

  3. Run dart bin/sass.dart path/to/file.scss.

That's it!

JavaScript API

When installed via npm, Dart Sass supports a JavaScript API that aims to be compatible with Node Sass. Full compatibility is a work in progress, but Dart Sass currently supports the render() and renderSync() functions. 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 package to call asynchronous importers from the synchronous code path. To enable this, pass the Fiber class to the fiber option:

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:

The following options are not yet supported, but are intended:

No support is intended for the following options:

  • 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. Once Dart Sass supports source maps, that will be the recommended way of locating the origin of generated selectors.

Goals

Dart Sass is intended to eventually replace Ruby Sass as the canonical implementation of the Sass language. It has a number of advantages:

  • It's fast. The Dart VM is highly optimized, and getting faster all the time (for the latest performance numbers, see perf.md). It's much faster than Ruby, and not too far away from C.

  • It's portable. The Dart VM has no external dependencies and can compile applications into standalone snapshot files, so a fully-functional Dart Sass could be distributed as only three files (the VM, the snapshot, and a wrapper script). Dart can also be compiled to JavaScript, which would make it easy to distribute Sass through npm or other JS package managers.

  • It's friendlier to contributors. Dart is substantially easier to learn than Ruby, and many Sass users in Google in particular are already familiar with it. More contributors translates to faster, more consistent development.

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.

Disclaimer: this is not an official Google product.

1.1.1

  • Add a commit that was accidentally left out of 1.1.0.

1.1.0

  • The command-line executable can now be used to write an output file to disk using sass input.scss output.css.

  • Use a POSIX-shell-compatible means of finding the location of the sass shell script.

1.0.0

Initial stable release.

Changes Since 1.0.0-rc.1

  • Allow ! in custom property values (#260).

Dart API

  • Remove the deprecated render() function.

Node API

  • Errors are now subtypes of the Error type.

  • Allow both the data and file options to be passed to render() and renderSync() at once. The data option will be used as the contents of the stylesheet, and the file option will be used as the path for error reporting and relative imports. This matches Node Sass's behavior.

1.0.0-rc.1

  • Add support for importing an _index.scss or _index.sass file when importing a directory.

  • Add a --load-path command-line option (alias -I) for passing additional paths to search for Sass files to import.

  • Add a --quiet command-line option (alias -q) for silencing warnings.

  • Add an --indented command-line option for using the indented syntax with a stylesheet from standard input.

  • Don't merge the media queries not type and (feature). We had previously been generating not type and (feature), but that's not actually the intersection of the two queries.

  • Don't crash on $x % 0.

  • The standalone executable distributed on GitHub is now named sass rather than dart-sass. The dart-sass executable will remain, with a deprecation message, until 1.0.0 is released.

Dart API

  • Add a Logger class that allows users to control how messages are printed by stylesheets.

  • Add a logger parameter to compile(), compileAsync(), compileString(), and compileStringAsync().

Node JS API

  • Import URLs passed to importers are no longer normalized. For example, if a stylesheet contains @import "./foo.scss", importers will now receive "./foo.scss" rather than "foo.scss".

1.0.0-beta.5.3

  • Support hard tabs in the indented syntax.

  • Improve the formatting of comments that don't start on the same line as the opening /*.

  • Preserve whitespace after and in media queries in compressed mode.

Indented Syntax

  • Properly parse multi-line selectors.

  • Don't deadlock on /* comments.

  • Don't add an extra */ to comments that already have it.

  • Preserve empty lines in /* comments.

1.0.0-beta.5.2

  • Fix a bug where some colors would crash compressed mode.

1.0.0-beta.5.1

  • Add a compressed output style.

  • Emit a warning when && is used, since it's probably not what the user means.

  • round() now returns the correct results for negative numbers that should round down.

  • var() may now be passed in place of multiple arguments to rgb(), rgba(), hsl() and hsla().

  • Fix some cases where equivalent numbers wouldn't count as the same keys in maps.

  • Fix a bug where multiplication like (1/1px) * (1px/1) wouldn't properly cancel out units.

  • Fix a bug where dividing by a compatible unit would produce an invalid result.

  • Remove a non-sh-compatible idiom from the standalone shell script.

Dart API

  • Add a functions parameter to compile(), compleString(), compileAsync(), and compileStringAsync(). This allows users to define custom functions in Dart that can be invoked from Sass stylesheets.

  • Expose the Callable and AsyncCallable types, which represent functions that can be invoked from Sass.

  • Expose the Value type and its subclasses, as well as the top-level sassTrue, sassFalse, and sassNull values, which represent Sass values that may be passed into or returned from custom functions.

  • Expose the OutputStyle enum, and add a style parameter to compile(), compleString(), compileAsync(), and compileStringAsync() that allows users to control the output style.

Node JS API

  • Support the functions option.

  • Support the "compressed" value for the outputStyle option.

1.0.0-beta.4

  • Support unquoted imports in the indented syntax.

  • Fix a crash when :not(...) extends a selector that appears in :not(:not(...)).

Node JS API

  • Add support for asynchronous importers to render() and renderSync().

Dart API

  • Add compileAsync() and compileStringAsync() methods. These run asynchronously, which allows them to take asynchronous importers (see below).

  • Add an AsyncImporter class. This allows imports to be resolved asynchronously in case no synchronous APIs are available. AsyncImporters are only compatible with compileAysnc() and compileStringAsync().

1.0.0-beta.3

  • Properly parse numbers with exponents.

  • Don't crash when evaluating CSS variables whose names are entirely interpolated (for example, #{--foo}: ...).

Node JS API

  • Add support for the importer option to render() and renderSync(). Only synchronous importers are currently supported.

Dart API

  • Added an Importer class. This can be extended by users to provide support for custom resolution for @import rules.

  • Added built-in FilesystemImporter and PackageImporter implementations that support resolving file: and package: URLs, respectively.

  • Added an importers argument to the compile() and compileString() functions that provides Importers to use when resolving @import rules.

  • Added a loadPaths argument to the compile() and compileString() functions that provides paths to search for stylesheets when resolving @import rules. This is a shorthand for passing FilesystemImporters to the importers argument.

1.0.0-beta.2

  • Add support for the ::slotted() pseudo-element.

  • Generated transparent colors will now be emitted as rgba(0, 0, 0, 0) rather than transparent. This works around a bug wherein IE incorrectly handles the latter format.

Command-Line Interface

  • Improve the logic for whether to use terminal colors by default.

Node JS API

  • Add support for data, includePaths, indentedSyntax, lineFeed, indentWidth, and indentType options to render() and renderSync().

  • The result object returned by render() and renderSync() now includes the stats object which provides metadata about the compilation process.

  • The error object thrown by render() and renderSync() now includes line, column, file, status, and formatted fields. The message field and toString() also provide more information.

Dart API

  • Add a renderString() method for rendering Sass source that's not in a file on disk.

1.0.0-beta.1

  • Drop support for the reference combinator. This has been removed from the spec, and will be deprecated and eventually removed in other implementations.

  • Trust type annotations when compiling to JavaScript, which makes it substantially faster.

  • Compile to minified JavaScript, which decreases the code size substantially and makes startup a little faster.

  • Fix a crash when inspecting a string expression that ended in "\a".

  • Fix a bug where declarations and @extend were allowed outside of a style rule in certain circumstances.

  • Fix not in parentheses in @supports conditions.

  • Allow url as an identifier name.

  • Properly parse /***/ in selectors.

  • Properly parse unary operators immediately after commas.

  • Match Ruby Sass's rounding behavior for all functions.

  • Allow \ at the beginning of a selector in the indented syntax.

  • Fix a number of @extend bugs:

    • selector-extend() and selector-replace() now allow compound selector extendees.

    • Remove the universal selector * when unifying with other selectors.

    • Properly unify the result of multiple simple selectors in the same compound selector being extended.

    • Properly handle extensions being extended.

    • Properly follow the first law of @extend.

    • Fix selector specificity tracking to follow the second law of @extend.

    • Allow extensions that match selectors but fail to unify.

    • Partially-extended selectors are no longer used as parent selectors.

    • Fix an edge case where both the extender and the extended selector have invalid combinator sequences.

    • Don't crash with a "Bad state: no element" error in certain edge cases.

1.0.0-alpha.9

  • Elements without a namespace (such as div) are no longer unified with elements with the empty namespace (such as |div). This unification didn't match the results returned by is-superselector(), and was not guaranteed to be valid.

  • Support & within @at-root.

  • Properly error when a compound selector is followed immediately by &.

  • Properly handle variable scoping in @at-root and nested properties.

  • Properly handle placeholder selectors in selector pseudos.

  • Properly short-circuit the or and and operators.

  • Support --$variable.

  • Don't consider unitless numbers equal to numbers with units.

  • Warn about using named colors in interpolation.

  • Don't emit loud comments in functions.

  • Detect import loops.

  • Fix @import with a supports() clause.

  • Forbid functions named "and", "or", and "not".

  • Fix type-of() with a function.

  • Emit a nicer error for invalid tokens in a selector.

  • Fix invert() with a $weight parameter.

  • Fix a unit-parsing edge-cases.

  • Always parse imports with queries as plain CSS imports.

  • Support & followed by a non-identifier.

  • Properly handle split media queries.

  • Properly handle a placeholder selector that isn't at the beginning of a compound selector.

  • Fix more str-slice() bugs.

  • Fix the % operator.

  • Allow whitespace between = and the mixin name in the indented syntax.

  • Fix some slash division edge cases.

  • Fix not when used like a function.

  • Fix attribute selectors with single-character values.

  • Fix some bugs with the call() function.

  • Properly handle a backslash followed by a CRLF sequence in a quoted string.

  • Fix numbers divided by colors.

  • Support slash-separated numbers in arguments to plain CSS functions.

  • Error out if a function is passed an unknown named parameter.

  • Improve the speed of loading large files on Node.

  • Don't consider browser-prefixed selector pseudos to be superselectors of differently- or non-prefixed selector pseudos with the same base name.

  • Fix an @extend edge case involving multiple combinators in a row.

  • Fix a bug where a @content block could get incorrectly passed to a mixin.

  • Properly isolate the lexical environments of different calls to the same mixin and function.

1.0.0-alpha.8

  • Add the content-exists() function.

  • Support interpolation in loud comments.

  • Fix a bug where even valid semicolons and exclamation marks in custom property values were disallowed.

  • Disallow invalid function names.

  • Disallow extending across media queries.

  • Properly parse whitespace after ... in argument declaration lists.

  • Support terse mixin syntax in the indented syntax.

  • Fix @at-root query parsing.

  • Support special functions in @-moz-document.

  • Support ... after a digit.

  • Fix some bugs when treating a map as a list of pairs.

1.0.0-alpha.7

  • Fix function-exists(), variable-exists(), and mixin-exists() to use the lexical scope rather than always using the global scope.

  • str-index() now correctly inserts at negative indices.

  • Properly parse url()s that contain comment-like text.

  • Fix a few more small @extend bugs.

  • Fix a bug where interpolation in a quoted string was being dropped in some circumstances.

  • Properly handle @for rules where each bound has a different unit.

  • Forbid mixins and functions from being defined in control directives.

  • Fix a superselector-computation edge case involving :not().

  • Gracefully handle input files that are invalid UTF-8.

  • Print a Sass stack trace when a file fails to load.

1.0.0-alpha.6

  • Allow var() to be passed to rgb(), rgba(), hsl(), and hsla().

  • Fix conversions between numbers with dpi, dpcm, and dppx units. Previously these conversions were inverted.

  • Don't crash when calling str-slice() with an $end-at index lower than the $start-at index.

  • str-slice() now correctly returns "" when $end-at is negative and points before the beginning of the string.

  • Interpolation in quoted strings now properly preserves newlines.

  • Don't crash when passing only $hue or no keyword arguments to adjust-color(), scale-color(), or change-color().

  • Preserve escapes in identifiers. This used to only work for identifiers in SassScript.

  • Fix a few small @extend bugs.

1.0.0-alpha.5

  • Fix bounds-checking for opacify(), fade-in(), transparentize(), and fade-out().

  • Fix a bug with @extend superselector calculations.

  • Fix some cases where #{...}-- would fail to parse in selectors.

  • Allow a single number to be passed to saturate() for use in filter contexts.

  • Fix a bug where **/ would fail to close a loud comment.

  • Fix a bug where mixin and function calls could set variables incorrectly.

  • Move plain CSS @imports to the top of the document.

1.0.0-alpha.4

  • Add support for bracketed lists.

  • Add support for Unicode ranges.

  • Add support for the Microsoft-style = operator.

  • Print the filename for @debug rules.

  • Fix a bug where 1 + - 2 and similar constructs would crash the parser.

  • Fix a bug where @extend produced the wrong result when used with selector combinators.

  • Fix a bug where placeholder selectors were not allowed to be unified.

  • Fix the mixin-exists() function.

  • Fix :nth-child() and :nth-last-child() parsing when they contain of selector.

1.0.0-alpha.3

  • Fix a bug where color equality didn't take the alpha channel into account.

  • Fix a bug with converting some RGB colors to HSL.

  • Fix a parent selector resolution bug.

  • Properly declare the arguments for opacify() and related functions.

  • Add a missing dependency on the stack_trace package.

  • Fix broken Windows archives.

  • Emit colors using their original representation if possible.

  • Emit colors without an original representation as names if possible.

1.0.0-alpha.2

  • Fix a bug where variables, functions, and mixins were broken in imported files.

1.0.0-alpha.1

  • Initial alpha release.

Use this package as an executable

1. Install it

You can install the package from the command line:


$ pub global activate sass

2. Use it

The package has the following executables:


$ dart-sass

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  sass: "^1.1.1"

2. Install it

You can install packages from the command line:

with pub:


$ pub get

with Flutter:


$ flutter packages get

Alternatively, your editor might support pub get or flutter packages get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


      import 'package:sass/sass.dart';
  
Version Uploaded Documentation Archive
1.3.2 May 4, 2018 Go to the documentation of sass 1.3.2 Download sass 1.3.2 archive
1.3.1 May 3, 2018 Go to the documentation of sass 1.3.1 Download sass 1.3.1 archive
1.3.0 Apr 26, 2018 Go to the documentation of sass 1.3.0 Download sass 1.3.0 archive
1.2.1 Apr 19, 2018 Go to the documentation of sass 1.2.1 Download sass 1.2.1 archive
1.2.0 Apr 14, 2018 Go to the documentation of sass 1.2.0 Download sass 1.2.0 archive
1.1.1 Mar 27, 2018 Go to the documentation of sass 1.1.1 Download sass 1.1.1 archive
1.1.0 Mar 27, 2018 Go to the documentation of sass 1.1.0 Download sass 1.1.0 archive
1.0.0 Mar 26, 2018 Go to the documentation of sass 1.0.0 Download sass 1.0.0 archive
0.4.2+7 Nov 5, 2016 Go to the documentation of sass 0.4.2+7 Download sass 0.4.2+7 archive
0.4.2+5 Nov 5, 2016 Go to the documentation of sass 0.4.2+5 Download sass 0.4.2+5 archive

All 51 versions...

Analysis

We analyzed this package on May 22, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0-dev.54.0
  • pana: 0.11.1

Scores

Popularity:
Describes how popular the package is relative to other packages. [more]
87 / 100
Health:
Code health derived from static analysis. [more]
95 / 100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
57 / 100
Overall score:
Weighted score of the above. [more]
83
Learn more about scoring.

Platforms

Detected platforms: Flutter, other

Primary library: package:sass/sass.dart with components: isolate.

Suggestions

  • Fix analysis and formatting issues.

    Analysis or formatting checks reported 85 errors 23 hints.

    Strong-mode analysis of lib/src/importer/node/implementation.dart failed with the following error:

    line: 7 col: 8
    Target of URI doesn't exist: 'package:js/js.dart'.

    Strong-mode analysis of lib/src/io/node.dart failed with the following error:

    line: 8 col: 8
    Target of URI doesn't exist: 'package:js/js.dart'.

    Similar analysis of the following files failed:

    • lib/src/node.dart (error)
    • lib/src/node/error.dart (error)
    • lib/src/node/exports.dart (error)
    • lib/src/node/fiber.dart (error)
    • lib/src/node/function.dart (error)
    • lib/src/node/importer_result.dart (error)
    • lib/src/node/render_context.dart (error)
    • lib/src/node/render_context_options.dart (error)
    • lib/src/node/render_options.dart (error)
    • lib/src/node/render_result.dart (error)
    • lib/src/node/types.dart (error)
    • lib/src/node/utils.dart (error)
    • lib/src/node/value/boolean.dart (error)
    • lib/src/node/value/color.dart (error)
    • lib/src/node/value/list.dart (error)
    • lib/src/node/value/map.dart (error)
    • lib/src/node/value/null.dart (error)
    • lib/src/node/value/number.dart (error)
    • lib/src/node/value/string.dart (error)
    • lib/src/executable.dart (hint)
    • lib/src/extend/functions.dart (hint)
    • lib/src/importer/result.dart (hint)
    • lib/src/io/vm.dart (hint)
    • lib/src/value/external/argument_list.dart (hint)
    • lib/src/value/external/list.dart (hint)
    • lib/src/value/external/map.dart (hint)
    • lib/src/value/number.dart (hint)
  • The description is too short.

    Add more detail about the package, what it does and what is its target use case. Try to write at least 60 characters.

  • Maintain an example.

    Create a short demo in the example/ directory to show how to use this package. Common file name patterns include: main.dart, example.dart or you could also use sass.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.22.0 <2.0.0
args >=0.13.0 <2.0.0 1.4.3
async >=1.10.0 <3.0.0 2.0.7
charcode ^1.1.0 1.1.1
collection ^1.8.0 1.14.9
convert ^2.0.1 2.0.1
meta ^1.0.0 1.1.5
package_resolver ^1.0.0 1.0.2
path ^1.0.0 1.5.1
source_span ^1.4.0 1.4.0
stack_trace >=0.9.0 <2.0.0 1.9.2
string_scanner >=0.1.5 <2.0.0 1.0.2
tuple ^1.0.0 1.0.1
Transitive dependencies
http_parser 3.1.2
package_config 1.0.3
quiver_hashcode 1.0.0
typed_data 1.1.5
Dev dependencies
analyzer ^0.30.0
archive ^1.0.0
crypto >=0.9.2 <3.0.0
dart_style ^1.0.0
grinder ^0.8.0
http ^0.11.0 0.11.3+16
js ^0.6.0
node_preamble ^1.1.0
pub_semver ^1.0.0
stream_channel ^1.0.0
test ^0.12.29
test_descriptor ^1.0.0
test_process ^1.0.0-rc.1
xml ^2.4.0
yaml ^2.0.0