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

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 led 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 all together 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.

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 the difference is. 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, for this series of articles, we’ll be covering the SCSS syntax.

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

Creating a new Sass file and compilation set up

There are a few ways you can choose to compile Sass for Shopify. You can use either a compiler with an interface or one without. Either way you’ll likely want to set up your file structure similarly to this:

|-assets
   |-theme.css // this is the final compiled CSS consumed by your theme
|-styles
   |-components
   |-global
   |- ...
   |-theme.scss // this file compiles into assets/theme.css

Depending on how you like to modularize or split up your stylesheets or what system you choose to follow (BEM, SMACSS, etc) your file structure might vary slightly. What is important to note is that the theme.scss file that imports all your component partials and more is what’s compiled into the /assets directory as theme.css and linked in the <head> of your theme:

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

Where theme.css is the name of your new compiled css file in the assets/ directory.

To set up your compilation for Sass, take a look at the following tutorials:

Using Gulp for Sass Compilation with Shopify
If you’re comfortable with terminal consider following the following tutorial made by one of our Shopify Partners, Up At Five, who cover how to set up Gulp with Shopify.

Set up Prepros for Sass Compilation with Shopify
If you’re more comfortable using an app with interface for Sass compilation check out live reloading Sass compilation with Prepros.

You might also like: Intro to CSS: A Beginner’s Guide to Cascading Style Sheets.

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.

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.

I would recommend you use class selectors over element selectors, as element selectors become difficult to override.

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.

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, or move towards the complete customization of features like Shopify sections. 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.

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!