Sass: Dart Sass

<!doctype html> <html lang="en" class="no-js"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="description" content="Syntactically Awesome Style Sheets" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Sass: Dart Sass</title> <link rel="alternate" type="application/atom+xml" href="/feed.xml" /> <link rel="apple-touch-icon" sizes="152x152" type="image/png" href="/icon.png"> <link rel="icon" type="image/png" sizes="152x152" href="/icon.png"> <link rel="icon" type="image/x-icon" href="/favicon.ico" /> <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro::ital,wght@0,400;0,600;1,400|Source+Sans+Pro:300,400,600|Source+Serif+Pro" media="screen" rel="stylesheet" /> <link href="https://cdn.jsdelivr.net/npm/@docsearch/css@alpha" media="screen" rel="stylesheet" /> <link href="/assets/dist/css/sass.css" media="screen" rel="stylesheet" /> <noscript> <link href="/assets/dist/css/noscript.css" media="screen" rel="stylesheet" /> </noscript>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-535380-14"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'UA-535380-14'); </script> </head><body data-layout="body" class="dart-sass">  <header class="sl-r-banner" itemtype="https://schema.org/WPHeader" itemscope="itemscope" role="banner"> <div class="sl-c-alert" style="--sl-background--alert: black"> <div class="sl-l-container"> <p><strong>Free Palestine</strong></p> </div> </div> <div class="sl-c-pop-stripe"></div> <div class="sl-l-container"> <div class="sl-l-grid sl-l-grid--full sl-l-large-grid--fit sl-l-large-grid--center sl-l-large-grid--gutters"> <p class="sl-l-grid__column sl-r-banner__brand"> <a href="/"><img height="48" alt="Sass" src="/assets/img/logos/logo.svg"></a> </p> <nav class="sl-r-banner__navigation sl-l-grid__column sl-l-large-grid sl-l-large-grid__column--auto-size sl-c-list-horizontal-wrapper" itemtype="https://schema.org/SiteNavigationElement" itemscope="itemscope" role="navigation" aria-label="Site navigation"> <ul> <li><a href="/playground">Playground</a></li> <li><a href="/install">Install</a></li> <li><a href="/guide">Learn Sass</a></li> <li><a href="/blog">Blog</a></li> <li><a href="/documentation">Documentation</a></li> <li><a href="/community">Get Involved</a></li> <li> <div id="docsearch"></div> </li> </ul> </nav> </div> </div> </header> <main class="content" id="main-content" itemprop="mainContentOfPage" role="main"> <h1 class="sl-l-container">Dart Sass</h1> <div class="sl-l-container sl-color--white-background sl-l-section"> <div class="docSearch-content"> <div class="sl-c-introduction"> <p>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 <a href="https://github.com/sass/dart-sass">GitHub</a>.</p> </div> <div class="sl-l-grid sl-l-grid--full sl-l-large-grid--fit sl-l-large-grid--gutters-large"> <div class="sl-l-grid__column"> <h2 id="command-line" tabindex="-1">Command Line<a class="anchor" href="#command-line"><span class="visuallyhidden">Command Line permalink</span></a></h2> <p>Dart Sass’s stand-alone command-line executable uses the blazing-fast Dart <span class="caps">VM</span> to compile your stylesheets. To install Dart Sass on the command line, check out the <a href="/install">installation instructions</a>. Once you’ve got it running, you can use it compile<span class="widont"> </span>files:</p> <pre class="language-shellsession"><code class="language-shellsession"><span class="token output">sass source/index.scss css/index.css </span></code></pre> <p>See <code>sass --help</code> for additional information on the command-line<span class="widont"> </span>interface.</p> <h3 id="dart-library" tabindex="-1">Dart Library<a class="anchor" href="#dart-library"><span class="visuallyhidden">Dart Library permalink</span></a></h3> <p>You can also use Dart Sass as a Dart library to get the speed of the Dart <span class="caps">VM</span> plus the ability to define your own functions and importers. To add it to an existing<span class="widont"> </span>project:</p> <ol> <li> <p><a href="https://dart.dev/get-dart">Install the Dart <span class="caps">SDK</span></a>. Make sure its <code>bin</code> directory is <a href="https://katiek2.github.io/path-doc/">on your <code>PATH</code></a>.</p> </li> <li> <p>Create a <code>pubspec.yaml</code> file like<span class="widont"> </span>this:</p> </li> </ol> <pre class="language-yaml"><code class="language-yaml"><span class="token key atrule">name</span><span class="token punctuation">:</span> my_project <span class="token key atrule">dev_dependencies</span><span class="token punctuation">:</span> <span class="token key atrule">sass</span><span class="token punctuation">:</span> ^1.85.0</code></pre> <ol start="3"> <li> <p>Run <code>dart pub get</code>.</p> </li> <li> <p>Create a <code>compile-sass.dart</code> file like<span class="widont"> </span>this:</p> </li> </ol> <pre class="language-dart"><code class="language-dart"><span class="token keyword">import</span> <span class="token string-literal"><span class="token string">'dart:io'</span></span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token string-literal"><span class="token string">'package:sass/sass.dart'</span></span> <span class="token operator">as</span> sass<span class="token punctuation">;</span> <span class="token keyword">void</span> <span class="token function">main</span><span class="token punctuation">(</span><span class="token class-name">List</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">String</span><span class="token punctuation">></span></span> arguments<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> result <span class="token operator">=</span> sass<span class="token punctuation">.</span><span class="token function">compileToResult</span><span class="token punctuation">(</span>arguments<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">new</span> <span class="token class-name">File</span><span class="token punctuation">(</span>arguments<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">writeAsStringSync</span><span class="token punctuation">(</span>result<span class="token punctuation">.</span>css<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span></code></pre> <ol start="5"> <li>You can now use this to compile<span class="widont"> </span>files:</li> </ol> <pre class="language-shellsession"><code class="language-shellsession"><span class="token output">dart compile-sass.dart styles.scss styles.css </span></code></pre> <ol start="6"> <li> <p>Learn more about <a href="https://www.dartlang.org/guides/language/language-tour">writing Dart code</a> (it’s easy!) and about <a href="https://pub.dev/documentation/sass/latest/sass/compileToResult.html">Sass’s Dart<span class="widont"> </span><span class="caps">API</span></a>.</p> </li> </ol> </div> <div class="sl-l-grid__column"> <h2 id="java-script-library" tabindex="-1">JavaScript Library<a class="anchor" href="#java-script-library"><span class="visuallyhidden">JavaScript Library permalink</span></a></h2> <p>Dart Sass is also distributed as the pure JavaScript <a href="https://www.npmjs.com/package/sass"><code>sass</code> package</a> and <a href="https://www.npmjs.com/package/sass-embedded"><code>sass-embedded</code> package</a> on npm. The pure <span class="caps">JS</span> 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 <code>npm install --save-dev sass</code> and <code>require()</code> it as a<span class="widont"> </span>library:</p> <pre class="language-js"><code class="language-js"><span class="token keyword">const</span> sass <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'sass'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> result <span class="token operator">=</span> sass<span class="token punctuation">.</span><span class="token function">compile</span><span class="token punctuation">(</span><span class="token string">'style.scss'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">.</span>css<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// <span class="caps">OR</span></span> <span class="token keyword">const</span> result <span class="token operator">=</span> <span class="token keyword">await</span> sass<span class="token punctuation">.</span><span class="token function">compileAsync</span><span class="token punctuation">(</span><span class="token string">'style.scss'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">.</span>css<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre> <p>When installed via npm, Dart Sass supports a <a href="/documentation/js-api/">brand new JavaScript <span class="caps">API</span></a>, as well as a <a href="/documentation/js-api/#md:legacy-api">legacy <span class="caps">API</span></a> that’s fully compatible with the old Node Sass <span class="caps">API</span>. Note that when using the <code>sass</code> package, the synchronous <span class="caps">API</span> functions are more than twice as fast as the asynchronous <span class="caps">API</span>, due to the overhead of asynchronous<span class="widont"> </span>callbacks.</p> <h2 id="embedded-dart-sass" tabindex="-1">Embedded Dart Sass<a class="anchor" href="#embedded-dart-sass"><span class="visuallyhidden">Embedded Dart Sass<span class="widont"> </span>permalink</span></a></h2> <p>Dart Sass also supports the <a href="https://github.com/sass/sass/blob/main/spec/embedded-protocol.md#the-embedded-sass-protocol">Embedded Sass protocol</a>, which allows any programming language to communicate directly with the Dart <span class="caps">VM</span> to run Sass compilation, including custom function and importer support. This has two major<span class="widont"> </span>benefits:</p> <ol> <li> <p>It makes it easy to create a wrapper library for Dart Sass for any programming language that can run a<span class="widont"> </span>subprocess.</p> </li> <li> <p>The Dart <span class="caps">VM</span> is very fast, so this provides a substantial performance boost even for JavaScript where the native <code>sass</code> package is<span class="widont"> </span>available.</p> </li> </ol> <p>The following Embedded Sass wrapper packages are available. If you have another one to add, please <a href="https://github.com/sass/sass-site/edit/main/source/dart-sass.md">send a pull request</a>!</p> <ul> <li> <p><strong>Node.js</strong>: The <a href="https://www.npmjs.com/package/sass-embedded"><code>sass-embedded</code> package</a> is maintained by the Sass team, and supports the same <a href="/documentation/js-api/">official Sass JavaScript <span class="caps">API</span></a> as the native-<span class="caps">JS</span> <code>sass</code> package.</p> </li> <li> <p><strong>Go</strong>: The <a href="https://github.com/bep/godartsass"><code>github.com/bep/godartsass</code> package</a> runs Embedded Sass and supports the <a href="https://gohugo.io/">Hugo</a> static site<span class="widont"> </span>generator.</p> </li> <li> <p><strong>Java</strong>: The <a href="https://mvnrepository.com/artifact/de.larsgrefer.sass"><code>de.larsgrefer.sass</code> package</a> runs Embedded Sass in<span class="widont"> </span>Java.</p> </li> <li> <p><strong>Ruby</strong>: The <a href="https://rubygems.org/gems/sass-embedded"><code>sass-embedded</code> gem</a> is maintained by frequent Sass contributor<span class="widont"> </span>なつき.</p> </li> <li> <p><strong>Rust</strong>: The <a href="https://crates.io/crates/sass-embedded"><code>sass-embedded</code> crate</a> runs Embedded Sass in<span class="widont"> </span>Rust.</p> </div> </li> </ul> </div> </div> </div> <div class="sl-c-alert"> <div class="sl-l-container sl-c-list-horizontal-wrapper" aria-labelledby="release-nav"> <ul class="sl-l-grid--justify-center"> <li id="release-nav">Current Releases:</li> <li><span class="release-name"><a href="/dart-sass">Dart Sass</a> <a href="https://github.com/sass/dart-sass/releases/tag/1.85.0">1.85.0</a></span></li> <li><span class="release-name"><a href="/libsass">LibSass</a> <a href="https://github.com/sass/libsass/releases/tag/3.6.6">3.6.6</a></span></li> <li><span class="release-name"><a href="/ruby-sass">Ruby Sass</a> <span aria-label="coffin" role="presentation">⚰</span></span></li> <li class="sl-l-grid__column sl-l-large-grid__column--auto-size"><a href="/implementation">Implementation Guide</a></li> </ul> </div> </div> </main> <footer class="site-footer contentinfo" itemtype="https://schema.org/WPFooter" itemscope="itemscope" role="contentinfo"> <div class="sl-l-container"> <div class="sl-l-grid sl-l-grid--full sl-l-large-grid--fit sl-l-large-grid--center sl-l-large-grid--gutters"> <div class="sl-l-grid__column"> <p>Sass © 2006–2025 the Sass team, and numerous contributors. It is available for use and modification under the <a href="https://github.com/sass/dart-sass/blob/main/LICENSE"><span class="caps">MIT</span><span class="widont"> </span>License</a>.</p> <nav class="sl-c-list-horizontal-wrapper sl-c-list-wrap"> <ul> <li><a href="https://github.com/sass">Sass on GitHub</a></li> <li><a href="https://github.com/sass/sass-site">Website Source Code</a></li> <li><a href="/styleguide">Style Guide</a></li> <li><a href="/community-guidelines">Community Guidelines</a></li> </ul> </nav> </div> <div class="sl-l-grid__column sl-l-large-grid__column--auto-size sl-l-large-grid--justify-right sl-c-footer-link-grid"> <a class="twitter-follow-button" href="https://twitter.com/SassCSS" data-show-count="false" data-size="large">Follow @SassCSS</a> <a class="sl-image-link" href="https://www.netlify.com"><img alt="Deploys by Netlify" src="https://www.netlify.com/v3/img/components/netlify-color-bg.svg"/></a> <a class="sl-image-link mac-stadium-icon" href="https://www.macstadium.com/"><img alt="Powered by MacStadium" class="mac-stadium-icon" src="https://uploads-ssl.webflow.com/5ac3c046c82724970fc60918/5c019d917bba312af7553b49_MacStadium-developerlogo.png"></a> </div> </div> </div> </footer> <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@alpha"></script> <script> docsearch({ container: '#docsearch', appId: 'Q9MULQONSV', indexName: 'sass-lang', apiKey: '2ebc7881b79986f58dc2f424769bf3fc', transformItems: function(hits) { var domain = window.location.origin + "/"; hits.forEach(function(hit) { if (! hit.url.startsWith(domain)) { hit.url = hit.url.replace(/^https?:\/\/[^\/]+\//, domain); } }); return hits; } }); </script> <script> !function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (! d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs'); </script> <script src="/assets/dist/js/sass.js"></script>  </body> </html>

CINXE.COM

Sass: Dart Sass