A Beginner's Guide to Sass with Shopify — Part 3: Sass Interpolation, Workflow and Object Oriented CSS

A Beginner's Guide to Sass with Shopify — Part 3: Sass Interpolation, Workflow and Object Oriented CSS
Beginners guide to sass with shopify part 3

In part one of this series, I introduced you to Sass in Shopify themes, explained variables and nesting, and discussed the limitations of the Online Store Editor with Sass. In part two of this series, we looked at arithmetic operators, and I showed you how to create custom functions and mixins to build more versatile stylesheets.

This article will take a look at using Liquid in your Sass files, how to integrate Sass into your theming workflow, and the different approaches one can take. We’ll also cover best practices surrounding Sass and object oriented CSS, and give you a list of resources for further reading.

Sass interpolation

Interpolation, also known as string interpolation, variable interpolation, or variable substitution is not something special to Sass. You can see the concept of interpolation in many different languages, such as Ruby, PHP, Perl, Scala, and Swift, just to name a few.

Interpolating is the process of evaluating an expression or a string containing one or more variables, producing a result in which the variables are replaced with their corresponding values in memory, according to this article all about Sass interpolation.

What that means is when Sass processes an expression or string containing one or more variables using interpolation, it replaces the #{$variable} with the variable value in memory, rather than trying to execute the expression or string using those variables as values in the original process. You can think of Sass interpolation as a way of escaping certain values, variables, or syntax that might otherwise be misinterpreted by Sass.

So what does that look like in Sass? Let me show you.

For example:

$font-size: 100%;
$line-height: 1.5;

p {
  font: #{$font-size}/#{$line-height} Arial, Helvetica, sans-serif;
}

Compiles to:

p {
  font: 100%/1.5 Arial, Helvetica, sans-serif;
}

In Sass, variable names are prefixed with the dollar sign $, and the syntax is similar to Ruby, which uses the #{} for expression substitution. When Sass interpolation #{} is used near operators like /, those operators are treated as plain CSS rather than math operators. In this example, #{$font-size} and #{$line-height} resolve to 100%/1.5, instead of Sass trying to divide those two values by one another.

Media Queries

Another example of Sass interpolation is when using the media queries. Instead of using something like Breakpoint, you can create your own variables for mediaqueries. Sass compilation will fail if you try passing a variable (not using Sass interpolation) to @media, unless it finds an opening brace (, in which case it will then parse the whole query. However, using braces and then a variable doesn’t save us much typing.

Instead, we can set up a series of breakpoints as variables and use them with the @media directive.

For example:

$mobile: "only screen and (min-width: 20em)"; 

@media #{$mobile} {
  body {
    background-color: blue;
  }
}

Compiles to:

@media only screen and (min-width: 20em) {
  body {
    background-color: blue;
  }
}

In this example, #{$mobile} gets replaced upon compilation by the variable value only screen and (min-width: 20em).

Partials and import

A partial Sass file, is like a Liquid snippet. A Sass partial contains smaller snippets of CSS that you can include in other Sass files. This is a great way to modularize a Sass project, and make things easier to maintain. A Sass partial is simply a Sass file named with a leading underscore _. An example could be something like _mixins.scss where you might store all your mixins for your theme.

CSS has an import option that allows you to split CSS files into multiple smaller snippets. The only drawback with @import in CSS is that each time you use it, it creates another HTTP request.

Sass’ @import directive extends that functionality. Sass will take the file you want to import, and combine it with the file you’re importing it into, so only one CSS file is served to the web browser.

If you’ve ever set up a Sass project before outside of Shopify, you’ve probably used the @import directive to import multiple Sass partials (_init.scss,_mixins.scss, _forms.scss, etc.), into a single theme.scss file.

One thing to note is that if you’re letting Shopify compile your Sass file for you, Shopify doesn’t support the @import directive. Instead, if you want to use multiple Sass partials and the @import directive, you will have to compile your Sass locally using an app like CodeKit or Prepros, or a task runner like Gulp or Grunt — then sync the files to your theme using Theme Kit.

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

Using Liquid in Sass files

When you compile Sass on Shopify servers, you'll create a style.scss.liquid file. Shopify then compiles the Liquid first, then the Sass, to create the final CSS file.

But what if you want to compile locally so you can use @import and partials? Using Sass interpolation, we can escape Liquid in local Sass file compilation so that the Liquid can then be compiled on Shopify servers. I’ll cover more about local compilation workflow later in this article.

To escape Liquid in a Sass file with Sass interpolation, you can do the following:

For example:

a{
  color: #{'{{ settings.color-link }}'};
}

Compiles to:

a{
  color: #2980b9;
}

In the output above, #2980b9 is a value from the settings_schema.json file found in the theme, which is pulled in through the {{settings.color-link}} Liquid variable.

You can find other examples of how to escape Liquid code in Sass files in this awesome Gist made by Shopify Expert Stewart Knapman.

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

Workflow

There are a lot of different ways you can work with Sass and Shopify. I don’t pretend to know which one is best for you and your skill set, so instead I’ll go over a few different ways you can set up your workflow with Sass — starting with the simplest first.

Online Shopify Theme Editor

The Online Shopify Theme Editor is probably the easiest and quickest way to start using Sass with Shopify. Simply go to your theme in the Online Store tab, click the ... button, and select Edit HTML/CSS. From there you can go to your theme’s existing theme.scss file (most themes have this already) or create a new one. See part one of this guide to learn how to create a new Sass file with the online editor. You can start editing right away!

Beginners guide to sass with shopify part 3: Online editor

Motifmate

Motifmate is another popular option, it enables live reloading, Sass/Less/Stylus compilation, and more. Download the desktop application from their website. To link your store’s theme simply follow Motifmate’s instructions. It will download the Motifmate App from the Shopify App Store for you, and do most of the setup. From there, you can edit existing Sass files and create new ones that will be synced to your Shopify store.

Beginners guide to sass with shopify part 3: Motifmate

Prepros and Theme Kit, or CodeKit and Theme Kit

Compiling Sass locally with Prepros and Theme Kit, or CodeKit and Theme Kit is another option if you want to use a more modern version of Sass not available on Shopify servers (Shopify currently runs Sass 3.2). You can look into setting up a ‘local’ development environment with Theme Kit, as well as take a look at this article on how to use Prepros, live reloading, partials, and imports.

Beginners guide to sass with shopify part 3: Prepos
Prepros App.
Beginners guide to sass with shopify part 3: Codekit
CodeKit App.

Slate

Shopify’s Slate theme scaffold, which uses Gulp to compile your Sass files, can also be a great workflow tool. You can follow the instructions found in this article, or in the documentation, on how to install and run Slate.

One thing to note is that Slate is a theme scaffold, so there is very little styling by default, which is great for building themes from scratch, but not if you need a styled starting point. With Slate, Sass isn’t compiled locally, instead it’s compiled on the Shopify servers, which means you are restricted by the Sass version available on Shopify.

Beginners guide to sass with shopify part 3: Slate scaffolding theme and command line tool

Gulp

Using Gulp on it’s own is another way of compiling your Sass files, especially if you want to take advantage of newer versions of Sass, and use Sass partials and imports. Catherine Meyers wrote a great article on setting up Sass with Gulp for Shopify theming.

BEM, SMACSS, OOCSS, and other Sass resources

With all this new knowledge in your head, it’s important to keep in mind CSS best practices. There are some who still believe that Sass makes people write bad CSS. I believe that if garbage goes in, garbage will come out.

However, if you know your CSS, and use Sass to aid in your development process, it can be a really powerful tool. It’s important to be aware of CSS best practices and about modern CSS naming/organizational conventions, like BEM, SMACSS, and OOCSS. If we think about our projects in this way, then we’ll all have better styling; whether that’s in CSS or Sass.

Further Reading

Take a look at these articles on the concepts discussed above, as well as some additional resources for learning Sass.

Also, if you haven’t already, check out part one and part two of this beginner’s guide to Sass with Shopify!

Do you have any special tips when using Sass? Tell us about how you work with Sass in the comments below!

About the Author

Tiffany is a Partner Education & Front End Developer Advocate at Shopify. She specializes in front end development, user experience design, and accessibility. She is passionate about inspiring young designers and developers, and is the Ottawa chapter co-lead for Ladies Learning Code.

Grow your business with the Shopify Partner Program

Learn more