Shopify will deprecate Sass (Syntactically Awesome Style Sheet) to improve the storefront experience. In the short term, Sass will continue to work on Shopify themes but there is a migration to using only CSS stylesheets.
This change brings about an improved experience for themes. It will result in a more reliable experience for merchants and the themes will become more lean and performant.
If you have modified the theme's stylesheet (for an app, adjustment, etc.), consider using our recommendations to preserve these customizations.
What benefits come from this change?
Get the full story from Shopify's blog
Feature compatibility
Many modern features are unavailable since Shopify is using a legacy version of Sass. However, updating to the current version of Sass would result in a breaking change to themes. Fortunately, many of the advantages of Sass are achievable in modern CSS, so changing to CSS is the most suitable and lasting solution for merchants.
Speed and performance
There will be a significant speed improvement when merchants are interacting with the Shopify theme editor. Depending on the size of a stylesheet, switching to a purely CSS approach could reduce page loading times by multiple seconds.
For example, by using a purely CSS approach with themes merchants avoid common loading issues with the theme editor. Updates to the storefront will appear more quickly with CSS than with SCSS.
Preserving style customizations
There are three approaches to preserve your existing style customizations.
Transfer your customizations to the new CSS stylesheet
If you are using Sass features (nesting, mixins, variables, etc.), you will need to adapt the custom code into CSS (and, optionally, Liquid).
Consider using a tool like Sassmeister to ease this process
Transfer your custom styles to a separate SCSS stylesheet
You will need to load this new stylesheet in all theme layouts. You will also need to copy any theme variable definitions that your custom styles rely on.
{{ 'styles.css' | asset_url | stylesheet_tag }}
+ {{ 'custom.scss.css' | asset_url | stylesheet_tag }}
Use the new build tools to compile your sass locally (Flex and Turbo only)
Flex and Turbo include the original SCSS source code and a build tool to compile it into a CSS stylesheet. Use these to copy your code customizations (requires some local setup).
Theme versions with this update
- Parallax 4.0.5+
- Retina 4.7.7+
- Mobilia 6.2.5+
- Artisan 1.3.5+
- Responsive 7.2.6+
- Turbo 6.1.2+
- Flex 2.0.9+
Can I continue using my theme's SCSS file?
All themes containing SCSS files will continue to function for the foreseeable future, however, new theme releases will only contain the CSS file.