What is Sass deprecation and does it affect my theme?

Sass (short for Syntactically Awesome Style Sheet) is an extension of CSS (Cascading Style Sheet). Both these stylesheets are used to control the appearance of an online storefront. The Shopify platform is moving forward with CSS exclusively, so there are some details to consider.

First, explore the benefits of Sass deprecation and the new theme versions using CSS. Then, if you have custom CSS content (modifications or additions to the default stylesheet), consider our suggestions for custom code preservation.

Benefits of Sass deprecation

The positive outcomes of Sass deprecation are many (and best outlined in this Shopify blog article). Here are some key points to consider.

CSS is the most suitable and lasting solution for merchants

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 CSS approach would reduce page loading times by seconds.

For example, using CSS with themes merchants avoid running into common issues with the theme editor. Updates to the storefront will appear more quickly with CSS than with SCSS.

New theme versions using CSS

While themes containing SCSS files will continue to operate for the foreseeable future, updated themes will only contain the CSS file. 

The following theme versions are the first to include this change:

• Atlantic v14.4.0+
• Editions v9.8.0+
• Empire v5.4.0+
• Grid v4.8.0
• Launch v6.5.0+
• Pacific v4.6.0+
• Startup v9.4.0+
• Vogue v4.7.0+

Protect custom changes

Transfer your customizations to the new CSS stylesheet

If you have customizations written in Sass format (nesting, mixins, variables, etc.), adapt the custom code into CSS with a tool like Sassmeister. Then transfer the processed code to the new latest theme version's main stylesheet.

Transfer your custom styles to a separate SCSS stylesheet

Add custom.scss.css as a new asset. Then store your SCSS here. Then, in the theme.liquid, include the following code change.

Locate:

  {{ 'theme.css' | asset_url | stylesheet_tag }}

Then, paste this code below:

{{ 'custom.scss.css' | asset_url | stylesheet_tag }}

Result:

  {{ 'theme.css' | asset_url | stylesheet_tag }}
{{ 'custom.scss.css' | asset_url | stylesheet_tag }}