Sass is a superset of CSS, meaning you can write CSS in Sass as well as leverage Sass’ own preprocessing features such as nesting, mixins, operators, and so on. For those looking to use Sass with Enhance, the following steps are the easiest way to get started:
- Install the Sass node module (
npm install -D sass)
- Write some styles in Sass (using either the
- Run the Sass module on your source code, being sure to output the generated CSS to the public directory (
npx sass ./app/styles.scss ./public/styles.css)
- Add a
linktag to your project’s head component to reference the generated styles (
<link rel="stylesheet" href="/_public/styles.css" />), and optionally remove the Enhance Styles
linkTagif you prefer
With this setup in place, your generated Sass styles will be deployed and fingerprinted along with your other public assets.
To get a feel for how this all comes together, check out this basic example app.
While Sass was a popular choice for many years — and many existing websites still rely on it — we don’t find it to be the best choice for new projects where other options are available. Instead, we recommend using Enhance Styles, our built in styling library, which we believe offers a number of advantages over writing styles in Sass.
No build step required
Because Enhance Styles is written in plain CSS, this does mean authors don’t have access to other Sass features such as mixins, extends, or loops — but in fact, we view this as a benefit. Many of these abstractions provided by Sass can cause developers to unintentionally add significant bloat to their generated stylesheets, resulting in poor performance and degraded user experience. These abstractions can also make it harder to debug code when bugs pop up, as the code you write is not the same as the code being shipped to end users.
Smaller CSS bundles, greater versatility
Enhance Styles’ default configuration weighs in at 11kb or less (depending on the type and level of compression used), yet offers an incredible wealth of versatility by exposing atomic, reusable CSS classes (also called utility classes) which can be used to style all manner of layouts and interface elements. Enhance Styles can also be fully customized in order to integrate with existing or new design systems.
For a more in depth look at why we prefer to write CSS using the atomic methodology, check out our deep dive in this article.
Maintainable scoped styles
Enhance also includes the ability to write styles scoped to reusable components, eliminating the need for complex orchestrations of class names and selector hierarchies which Sass is frequently used to accomplish.
Every new Enhance project ships with a cribsheet — a reference to all the utility classes defined in your project, which will autogenerate to include any customizations you may have made. This allows everyone on your team to quickly look up the exact classes (and their definitions) in use on your specific project.
We believe Enhance Styles’ simpler setup and zero config default, its breadth of features, and its small surface area paired with its extremely high versatility is a winning combination, and we invite you to give it a try in your next Enhance project!