Sass

How to integrate Sass with Webflow

If you write more than a few lines of custom CSS in Webflow, you've probably dealt with the pain of round-tripping between a local IDE and Webflow's plain-text Code Embed interface. The Sass app removes that friction by putting a full code editor inside Webflow with live compilation and preview.

The only way to set up this integration is by installing the Sass app from the Webflow Apps Marketplace. There is no embed code, API, or webhook-based alternative.

Install and use the Sass app

Install the Sass app from the Webflow Apps Marketplace. Once installed, the app appears in Webflow's Apps panel and gives you a code editor where you can write Sass or CSS with instant compilation.

To get started:

1. Open your Webflow project and navigate to the Apps panel in the left sidebar
2. Search for "Sass" or visit the marketplace listing directly
3. Click Install and authorize for your workspace or a specific site
4. Open the app from the Apps panel to start writing Sass

The app requires access to Webflow's custom code capabilities, which means you need a paid site plan to publish compiled CSS to a live site. The app itself is free with no subscription costs or usage limits.

The editor supports the features you'd expect from a local IDE:

• Full Sass preprocessing: Write nested selectors, @mixin definitions, variables, and @extend inheritance that compile to clean CSS.
• Code autocompletion: Get suggestions for CSS properties, your existing Webflow class names, and Webflow variables as you type.
• Multi-cursor editing: Select and edit multiple lines at once for batch updates across your stylesheet.
• Minified output: The compiled CSS is minified automatically for production, and you can export both the original Sass source and the compressed output.

All compilation happens in your browser. No code is sent to external servers. The compiled CSS integrates with Webflow's native undo/redo system, and Webflow supports custom code in preview mode (launched April 2025), so you can see your Sass-generated styles before publishing. Third-party scripts that enforce domain validation may need modification to load correctly on Webflow's preview domain.

If you uninstall the app, your published sites continue working with the compiled CSS already in place. You only lose the ability to edit the original Sass source until you reinstall. You can also export your Sass source and compiled CSS at any time.

What you can build

The Sass app is most useful on medium-to-large Webflow projects where custom CSS grows beyond what's comfortable in a plain-text embed. It gives you the organizational tools (nesting, mixins, variables) to keep complex stylesheets maintainable.

Here are a few examples of what you can build with this integration:

• Multi-brand marketing sites: Define color palettes, typography scales, and spacing as a set of Sass variables, then swap a group of brand tokens to change the visual identity across the entire site. This works well for agencies managing white-label deployments or client presentations from a shared codebase.
• E-commerce product catalogs: Write a single @mixin product-card definition that controls hover states, shadows, and pricing typography, then @include it across all product grid items. When the design changes, update the mixin once instead of hunting through scattered class overrides.
• Interactive landing pages: Group scroll-triggered entrance effects, hover transitions, and loading states inside nested Sass blocks so that all styles for a single animation sequence stay together, rather than scattered across your stylesheet.
• Dashboard interfaces: Nest breakpoint-specific rules inside each component's styles so your sidebar navigation, data tables, and chart containers each contain their own responsive logic. This keeps media queries co-located with the components they affect.

These patterns work with any Webflow project that uses custom CSS. The Sass app handles the authoring and compilation; the output is standard CSS that Webflow renders like any other custom code.