A Beginner's Guide to Building Shopify Themes with Sass — Part 1: Getting Started With Sass

A Beginner's Guide to Building Shopify Themes with Sass — Part 1: Getting Started With Sass

A beginner's guide to building shopify themes with sass part 1This is part one of a three part beginner’s guide to Sass with Shopify.

Check out part two of this series, making stylesheets smarter with Sass mixins and functions. »

One of the great things about Shopify is that we support SCSS compilation in our online store editor. It means that you can take advantage of Sass without having to set up a compiler or build tools, because it’s automatically built into the online store editor for you.

As CSS has gotten more complex, and stylesheets have become larger and harder to maintain, CSS preprocessors have become very popular. CSS preprocessors were created to solve problems around reusability of code, and creating more abstractions to simplify development. These preprocessors have even lead to changes to the CSS language itself, with the creation of CSS custom properties.

This article is the first in a series of articles, which will altogether comprise a beginner’s guide to Sass with Shopify. In this article, we’ll cover the differences between Sass and SCSS, and give an introduction to variables, nesting, and some of the limitations of Sass in Shopify’s online theme editor.

What is a CSS preprocessor?

As our web projects have become larger and more complicated than they once were, CSS was found to have some limits. CSS is a declarative language, so it’s difficult to create abstractions and reusable chunks of code in our stylesheets. To overcome these limitations, the CSS preprocessor was born.

A CSS preprocessor is a scripting language that extends CSS and gets compiled into regular CSS syntax. CSS preprocessors usually require some kind of compiler, whether that’s an application or script, that will convert your CSS preprocessor syntax (depending on which preprocessor syntax you’re using) into regular CSS syntax that your browser will understand. Remember, browsers only understand and render plain ol’ CSS.

The most popular CSS preprocessors are Sass, Less, and Stylus. Shopify uses Sass, more specifically, the SCSS syntax.

A beginner's guide to building shopify themes with sass part 1: Flow graphic
Sass gets compiled by Shopify into CSS and served to the web browser.

Sass vs. SCSS, what’s the difference?

If you’ve never used a CSS preprocessor before, and come across articles that refer to Sass or SCSS, you might be wondering what’s the difference? The two terms are often used interchangeably, and in plain language, often refer to the same thing — the CSS preprocessor called Sass.

Sass stands for Syntactically Awesome Style Sheets. It’s one of the oldest CSS preprocessors, and has been actively supported for more than nine years. Sass is compatible with all versions of CSS, so you can use any available CSS libraries.

The main difference between Sass and SCSS is the file extension and syntax. There are two syntaxes for Sass. The first is SCSS, also known as Sassy CSS, which is an extension of the CSS syntax. Files using the SCSS syntax use the .scss extension. In version 3 of Sass, SCSS was introduced as “the new main syntax.”

One of the reasons SCSS existed in the first place, was to aid in the adoption of Sass altogether. It makes it easy to turn a regular CSS project into a Sass project, because CSS is valid SCSS syntax.

This means that all you have to do is change the file extension on a CSS file to make it into a valid SCSS file. It was a much more approachable syntax for new users to Sass, which made Sass’ popularity skyrocket after its release.

The other (older) syntax for Sass is known as the indented syntax, or sometimes referred to as just “Sass.” It provides a more concise way of writing CSS, using indentation instead of brackets to denote nesting of selectors and new lines, rather than semi colons to denote new properties. Files using the “Sass” syntax use the .sass extension.

There’s an interesting article about the history and benefits of both Sass and SCSS, but when you’re using Sass with Shopify themes, it’s important to note that Shopify only supports the SCSS syntax of the Sass language. So for this series of articles, that’s the syntax we’ll be covering.

So let’s dive right into the some of the features of Sass!

Creating a new Sass file

To create a new Sass file with the SCSS syntax in a Shopify theme, simply create a new file with the .scss extension inside the assets/ directory.

A beginner's guide to shopify themes with sass: creating a new scss file

Then make sure to link the new asset to your theme in the <head> of your theme.liquid file with the following code:

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

Where theme.scss is the name of your new Sass file in the assets/ directory.

Variables

Variables are a way to store information that you want to reuse throughout your stylesheet. You can think of a variable like labelled box, which holds some kind of information that we can later reference by name. In Sass, we use the $ symbol to denote a variable name.

For example:

$font-primary: Helvetica, Arial, sans-serif;
$color-primary: #333;

body {
  font: normal 100%/1.5 $font-primary;
  color: $color-primary;
}

When the Sass is processed, it takes the variables we define and outputs normal CSS with our variable values placed wherever we’ve used the variable names in our Sass.

Compiles to:

body {
  font: normal 100%/1.5 Helvetica, Arial, sans-serif;
  color: #333;
}

If it’s helpful, you can think of the variables as placeholders for whatever their value is set to. Any variables that are defined outside of a selector are considered global variables. Any variables that are defined within a selector, are scoped to that selector and are local variables.

You’ll want to avoid declaring variables more than once in your Sass files, it’s good to know that you can overwrite the value of a variable by declaring more than once. The last value declared before it’s used, will be what the variable evaluates to. Sass works similarly to CSS in that it’s processed from top to bottom.

You might also like: Creating Dynamic Color Schemes with Theme Options and Presets.

Nesting

HTML has a clearly nested and organized visual hierarchy. CSS does not have the same hierarchy by default, but Sass allows you to nest selectors to follow the same visual hierarchy as your HTML.

Note that abusing the nesting capabilities in Sass can result in over-qualified or overly-specific CSS, that can be hard to maintain and is generally considered bad practice. A good rule of thumb is to never nest anything more than two layers deep; if you do, you should have a good reason for it.

Knowing this, here’s an example of what nesting looks like in Sass.

For example:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { 
    display: inline-block;
  }

  a {
    display: block;
    padding: 0.5em 1em;
    text-decoration: none;
  }
}

In this example, the ul, li, and a selectors are nested inside the nav element selector. This kind of organization makes our code really easy to read, navigate, and understand.

Compiles to:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 0.5em 1em;
  text-decoration: none;
}

I’ve used element selectors in this example, but you could easily interchange these selectors with any valid CSS selector, whether that’s a .classname or #id.

Using the Sass &

Another powerful feature of Sass is the &. It’s used when nesting to create some pretty powerful rules and patterns. There’s a great article on CSS Tricks that goes into detail about the Sass & and all it’s variations, but I’ll explain what I think are the most useful cases of it.

You can think of the & in Sass, as always referring to the parent selector when nesting. Pretend that the & is being removed and replaced with the parent selector. It’s often used with pseudo selectors for various link states.

For example:

.button {
  &:visited { 
    color: #2980b9;
  }

  &:hover,
  &:active { 
    color: #3498db;
  }
}

Compiles to:

.button:visited { 
  color: #2980b9;
}

.button:hover,
.button:active { 
  color: #3498db;
}

Another really useful use case for the & in Sass is qualifying based on context. What that means is nested selectors don’t necessarily have to start with the &. Remember when I said to think of the & as always referring to the parent selector?

For example:

.button {
  color: #ffffff;
  background-color: #2980b9;

  .page-contact & { 
     background-color: #e67e22;
  }
}

What we’re doing here is moving the parent selector exactly where we need it, in this way it’s very contextual to the button. This is really useful for qualifying a selector based on a different parent, in this case, a contact-page class.

Compiles to:

.button {
  color: #ffffff;
  background-color: #e67e22;
}

.page-contact .button { 
   background-color: #2980b9;
}

What this means is, .button by default is set to a nice blue of #2980b9. And only when a .button class is inside a class of .page-contact do we want to change it to a bright orange #e67e22.

See the Pen Using the Sass `&` by Shopify Partners (@ShopifyPartners) on CodePen.

Sass version 3.2, and limitations in the online store editor

At the time of writing, the Shopify online theme editor runs on Sass version 3.2 — which is a few major versions behind the latest version of Sass. One of the main reasons for this is to protect merchant interests.

There are breaking changes between some of the major Sass versions. If Shopify were to update Sass on our platform, some of the older Sass features currently used on store themes, which are no longer supported in the newer versions of Sass, would break. You can see some of those breaking changes in this changelog for the 3.3.0 version of Sass.

One specific example is how the specification changed the rules for the @extend property inside @media. There’s a great article on those changes written by Chris Eppstein. I’ll be going into what the @extend property does in the next article of this series.

Using newer versions of Sass with Shopify

Many developers who are familiar with Sass and are use to using its latest version, might find it frustrating that the online theme editor only supports Sass version 3.2. We often get questions around why someone is getting errors with using the correct syntax or a modern Sass library. Often it’s because the correct syntax is taking advantage of a feature of Sass only provided in a newer version — so the online theme editor can’t compile it.

However, you can set up your project to compile locally or through a compiler application on your computer, then sync the compiled CSS file to your store. This would allow you to take advantage of the newest version of Sass, while still using Shopify. To do this you could use a starter theme like Slate or compile a theme locally with Themekit and Prepros.

You might also like: Live Reloading Shopify Themes: Sass Compilation with Theme Kit and Prepros.

Get started using Sass!

You can get started using Sass today, even if you choose to take advantage of just variables and nesting. The great thing about Sass is that you don’t need to know all its capabilities to start using it. Because it’s an extension of CSS, you can take advantage of the parts that make sense to you and your workflow.

Stay tuned next week for Part 2 of the beginner’s guide to Sass with Shopify!

Is it your first time using Sass? Tell us about your favorite parts, and why you love using Sass in your projects in the comments below!

About the Author

Tiffany is a Front End Developer Advocate Lead at Shopify. She specializes in front end development, user experience design, accessibility, and is passionate about inspiring young designers and developers. Previously, she was an Ottawa Chapter Lead for Ladies Learning Code and worked as a Front End Developer for Partnerships at Shopify.

Grow your business with the Shopify Partner Program

Learn more