Using Sass to automate Sketch styles management

This is part 2 of the series devoted to styles preprocessing for product designers. This time we look into Sass and also do some new stuff with shadows and gradients.

Less and Sass are two most commonly used CSS preprocessors nowadays. We’ve created a plugin called Puzzle Tokens that allows you to define and generate styles in Sketch using Less syntax. After the plugin went public there was lots of requests to support Sass syntax too as many teams are using Sass in their development pipeline and adding Less to it just for the sake of supporting designer’s toolset would be a bit redundant.

I’m going to go though the examples provided in the original article and show a reference code on Sass to help fellow designers get familiar with Sass syntax faster.

For those of you who got here first hand I recommend reading the first article in the series to get acquainted with the concept of styles preprocessing in Sketch as well as learn how to make Puzzle Tokens work for you:

Bringing the power of styles preprocessing to Sketch

Setting up the .scss file

Sass interpreter is more restrictive in terms of how you structure your styles file. You should define all the modules, variables and functions you’re going to use at the beginning of the .scss file. We’ll start with adding two modules that we cannot live without. It’s sass:color and sass:map The former has everything to do with color manipulation, the latter is used to access values in arrays:

Now when basic stuff is settled, we can go on with putting some design tokens variables and styles definitions.

Example 1. Defining a base palette

First, we’re going to create an array of base colors that we have based on our branbook or whatever have you:

Then we’ll generate a set of background styles for Sketch based on the $colors array:

Once you run these two pieces together in Sketch via Puzzle Tokens, you’ll get background styles generated for you.

Shared styles in Sketch are created automatically

Example 2. Generating neutral shades palette

We’re going to follow the same rules to set a path to a style, as we used in the original article and add some Sass specifics:

In Sass you use map.get() to get to a specific value in the array by providing the name of the array and the key of the value you want to access.

Another thing you might notice when trying to run this example is that unlike in Less there’s no such function as tint() out of the box in Sass. You may replace it with the mix() native function instead. For the sake of consistency of the code samples though I will go ahead and create a simple wrapper function so I will be able to use tint() both in Less and Sass code:

(optional) Creating a function wrapper to have functions parity between Less and Sass

Heads up: Do not forget to put the function definition inthe beginning of the file.

Once we run the code through Puzzle Tokens, we get this:

Example 3. Taking care of the text styles

First we need to define our font-specific design tokens. We gonna do it the same way as with colors:

Heads up! Do not forget to put this piece as well as any other variables definition piece on top of your .scss file.

Now we’re good to go with text styles generation:

In Sketch text styles we get:

Example 4. Building accessible color combinations

I’m telling you — this is a tough thing to do in Sass.

In Less we had a great contrast() function that did all the work for us. In Sass you’ll have to invent a wheel from scratch if you need this kind of color manipulation. Thanks to Sérgio Gomes for the helping hand in it. I stumbled upon his article while googling to the solution, so you can go ahead and learn what’s under the hood if you want to. For our purpose we’ll reuse the code with slight modifications.

First, we need to create a function that returns a color, contrast to the given one.

At the end we get what we need: a contrast() function in Sass.

In order for the function to work, you’ll also need a set of precalculated values which are used as a substitute for the absent exp() funtion in Sass (which is ridiculous but it is what it is), which is in turn needed to calculate the luminance factor. You can grab the file with precalculated values here and reference it at the beginning of the main styles .scss file like this:

We’re almost there! The last thing left to do is to go through the list of colors, get contrast ones and generate Sketch styles. It’s easier for us to extend the existing loop with new sub-styles:

Once executed, the code generates a sub-set of text styles in Sketch styles palette:

Example 5. Generating gradients (new)

We’re going to create three layer styles with gradients based on the colors from the base palette. It’s pretty straightforward if you’re familiar with CSS gradients and goes like this:

Look, we have 3 layer styles for the gradients created:

Example 6. Generating shadows (new)

Inner shadows are not widely used, but for the sake of clarity let’s create 2 sets of shadows — outer and inner — based on the set of shadow design tokens defined:

The $module variable is used to have a single measure basis for every countable parameter of a system.

Now we’re good to generate the styles:

As a result, we get:

Summary

Puzzle Plugin allows you to define and generate Sketch styles using Less or Sass syntax. Do not miss the first article where I explain the approach to styles preprocessing to learn more about the problems modern designers face and how to address it with Puzzle Tokens.

You’ll also learn:

• How to use Less syntax to define and generate styles in Sketch
• How to install Puzzle Tokens
• Which CSS parameters are currently supported

Bringing the power of styles preprocessing to Sketch

Useful links

• Puzzle Tokens plugin for Sketch
• Sass documentation (very cryptic sometimes!)
• Sketch + Less + Sass example files
• Join Puzzle Tokens Spectrum chat for a live discussion