Introduction

On November 4, 2020, Shopify announced that they'd be deprecating Sass in themes. This means that use of .scss files will no longer be supported. The main reason why Sass has been deprecated is because Shopify has been using a legacy version, so a lot of modern Sass features aren't available. Updating the version of Sass being used could result in breaking themes that are currently in use. Also, switching to native CSS has also shown a significant increase in the loading speed of Shopify stores.

Since Sass is no longer supported, you can either:

1. use native .css files, or
2. use Sass and then compile .scss files into .css files locally

Method 1: Using native CSS instead of Sass

One of the big advantages of using Sass over CSS was the ability to save different values to variables. Native CSS now includes this feature and is supported in all modern browsers. Apart from this, the only other Sass feature used in the Shopify course is @mixin which can also be easily converted into native CSS.

Creating and using variables in native CSS

Creating new variables

As shown in video 18 / 31 Saving Sass Variables and Base Styles of Week 1, you store variables at the top of your CSS file by using the $ sign in front of the variable name:

$main-font: 'Rubik', 'Helvetica Neue', Arial, Helvetica, sans-serif;

$black: #000000;
$white: #FFFFFF;
$color-accent: #FF3700;
$color-text: #555555;

$line-global: 20px;
$gutter-global: $line-global * 2;

When you store variables in native CSS, you can use the :root selector to store variables. The :root selector is used to target the highest-level parent element. In this case, the :root selector would target the html element. This will make sure that the variable is accessible globally across the entire stylesheet, to be used for any selectors.

:root {
  --main-font: 'Rubik', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  --black: #000000;
  --white: #FFFFFF;
  --color-accent: #FF3700;
  --color-text: #555555;

  --line-global: 20px;
  --gutter-global: calc(var(--line-global) * 2);
}

When you perform calculations in Sass, you just multiply the variable by the number. In native CSS, you need to use the calc() function to perform calculations.

In our project Fitra, the $gutter-global variable is calculated using the $line-global variable:

$gutter-global: $line-global * 2;

To re-write the same line as native CSS, you need to pass the expression as a parameter of the calc() function, as shown below:

--gutter-global: calc(var(--line-global) * 2);