Sass: Ruby 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: Ruby 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="ruby-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">Ruby Sass</h1> <div class="sl-l-container sl-color--white-background sl-l-section"> <div class="docSearch-content sl-l-container sl-l-container--small"> <div class="sl-c-introduction"> <p>Ruby Sass was the original implementation of Sass, but it reached its end of life as of 26 March 2019. It’s no longer supported, and Ruby Sass users should migrate to another<span class="widont"> </span>implementation.</p> </div> <ul> <li> <h2>But Why?</h2> <p>When Natalie and Hampton first created Sass in 2006, Ruby was the language at the cutting edge of web development, the basis of their already-successful <a href="https://haml.info/">Haml</a> templating language, and the language they used most in their day-to-day work. Writing Sass in Ruby made it readily available to their existing users and the whole booming Ruby<span class="widont"> </span>ecosystem.</p> <p>Since then, Node.js has become ubiquitous for frontend tooling while Ruby has faded into the background. At the same time, Sass projects have grown far larger than we initially envisioned them, and their performance needs have outpaced the speed Ruby can provide. Both <a href="/dart-sass">Dart Sass</a> and <a href="/libsass">LibSass</a> are blazing fast, easy to install, and are readily available on npm. Ruby Sass couldn’t keep up, and it didn’t make sense to spend the core team’s resources on it any<span class="widont"> </span>longer.</p> </li> <li> <h2>Migrating Away</h2> <p>If you run Ruby Sass using the command-line <code>sass</code> executable, all you need to do is install Dart Sass’s <a href="/install">command-line executable</a> instead. The interface isn’t identical, but most options work the same<span class="widont"> </span>way.</p> <p>If you use the <code>sass</code> gem as a library, the <a href="https://rubygems.org/gems/sass-embedded"><code>sass-embedded</code></a> gem is the recommended way to move away from Ruby Sass. It bundles the Dart Sass command-line executable, and uses the <a href="https://github.com/sass/sass/blob/HEAD/spec/embedded-protocol.md">Embedded Sass Protocol</a> to provide a Ruby <span class="caps">API</span> for compiling Sass and defining custom importers and functions. You can also use the <a href="https://rubygems.org/gems/dartsass-rails"><code>dartsass-rails</code></a> or <a href="https://rubygems.org/gems/dartsass-sprockets"><code>dartsass-sprockets</code></a> gem to plug smoothly into Ruby on<span class="widont"> </span>Rails.</p> <p>Alternately, if you’re using a <span class="caps">JS</span> build system, you can integrate that with <a href="/dart-sass">Dart Sass</a> as a JavaScript<span class="widont"> </span>library.</p> </li> </ul> </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.81.0">1.81.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–2024 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: Ruby Sass