Sass

Sass is a Webflow app for a better large-scale custom CSS authoring experience.

‍

Why?

• For medium-large sized projects, it's common to write custom CSS (sometimes, a lot of it) for things like child/attribute selectors and their transition states, media queries, keyframe animations, custom properties, etc.
• The current HTML Embed code interface being mostly a plain text editor often leads to typos and a slow code writing experience.
• We still do it primarily to have live preview in the designer
• So for large sites, it can be a round-trip experience writing CSS in a local IDE, and then copy-pasting back and forth everytime. Highly time-consuming and takes us out of the development flow.

‍

How things can be different with the Sass app?

• Write Sass or CSS code in Webflow with instant compilation and preview in the designer. No more back-and-forth copy-pasting or struggling with errors.
• It comes with all the IDE features you'd expect. It's like having VSCode tailored for Sass brought into Webflow.
• You get code autocompletion, code-search, undo/redo, keyboard shortcuts, multi-cursor, ability to write Sass (nesting, mixins, etc.), and more.
• Also provides autocompletion for Webflow class names and variables
• Minified CSS code output
• No app lock-in
• Everything is processed in your browser, and stored in Webflow. Even if you uninstall the app, you'll have still have all the access to your code, and nothing will break on your sites.
• Safe and resilient to use on client projects of any size.

‍

Being a native Webflow element, you always have the option to take out your code (original/compressed version), restore backups, use Webflow Undo/Redo, etc. Fully flexible and stress-free.

For anybody who writes more than a few lines of custom CSS for their projects, would recommend giving it a shot. It may very well make your CSS writing experience much more pleasant in Webflow.

It comes with all the IDE features you'd expect. It's like having VSCode tailored for Sass brought into Webflow.

The app is just an interface. All the code lives in Webflow, and is processed locally in the browser. So, there's no risk of losing any styling or the site breaking even if you uninstall the app.

Can be used within components and you'll be able to author custom CSS effortlessly throughout the site.

‍

Features:

• Support for full Sass - including nesting, mixins, inheritances.
• CSS Properties auto-suggestion
• Live compilation and preview
• Minified code output

‍

If you write custom CSS for any Webflow project, do give it a shot and see the different for yourself.