I am not ashamed to tell you that I was really reluctant to try Sass.

When you’ve been doing front-end development as long as I have (20 years this August), you know that there are new tools and techniques made available on an almost-daily basis. Most of them are fleeting at best, so I tend to wait until it looks like something is gaining some traction before I take the time to try it out.

But Sass won me over on the very first project I put it to work on and I’ve used it on practically every project since. Along the way, I’ve picked up some clever tricks that make life easier and development faster.

Here’s a small roundup of some of my favorites. Enjoy!

---

Trick 1: Easy Modular Scales

I’ve written before about modular scales and how handy they are for calculating font size, line height, padding and margin to create visually pleasing and balanced typography.

You can let Sass do all the modular scale calculations for you. You’ll just need the Modular Scale plugin. Once you’ve got that, you set your base font size and the ratio you want to use, and then you can use the ms() function to set font sizes and other measurements throughout your CSS.

The super handy thing about this plugin is that you can change one line of code to see what your page might look like with a different ratio or base font size – all the other measurements you set with the ms() function will automatically be recalculated which makes experimenting and finding just the right ratio so much easier to do.

And there are even tools for using responsive scales built into the modular scale plugin.

---

Trick 2: Style WordPress galleries

If you build out custom WordPress themes, then you’ve likely come across the fact that by default, when you use galleries inside pages and posts, they come with their own <style> tag that takes care of styling the galleries nicely.

However, as a theme author, you can turn off these default styles and write your own CSS for handling the galleries. You can either use the use_default_gallery_style filter, or you can use add_theme_support for HTML5 gallery markup:

I like the HTML5 markup, so that’s what I usually use. Either approach gets you plain HTML galleries just waiting to be styled with your own CSS. You do have to remember style every possible number of columns, from 1 to 9. Don’t worry, Sass makes it easy.

WordPress adds some CSS classes to each gallery that let you style them differently depending on what settings were selected when creating the gallery. Here’s a sample of the HTML5 markup for a 3-column gallery:

You can see that WordPress adds a class for how many columns wide the gallery is, and we can use that to set the width of individual items in the gallery. And we can use a for loop to do it in just a couple lines of code in Sass:

We know WordPress galleries can be from 1 to 9 columns wide, so we just loop through each number from 1 to nine and set the width of individual gallery items to 100% divided by the number of columns. Then you can add other CSS and create a truly custom WordPress gallery for your theme.

---

Trick 3: Flexible SVG Backgrounds

I built a site where a chevron was used as a repeating background. The only trick was that the chevrons appeared in different parts of the design at different sizes and in different colors. I wanted a way to create those without having to create lots of different background images.

Initially, I thought of using some fancy CSS gradients to create the chevrons, but I found them super glitchy – at various screen sizes the pattern was off by a pixel here and there and the pattern seemed to be really uneven.

So then I thought of SVG. Typically, you can’t re-color SVGs that you’re using as background images but I thought that maybe if I could inline the SVG right in the CSS, I might be able to manipulate the colors as well as the sizes. It worked! Here’s what I came up with after doing lots of research:

Here’s how this works. The first two functions are just helpers that help me to get the code I need.

The first function, svg-url, takes a regular old SVG tag and coverts it to a data URI we can use to put that whole SVG right in the CSS – no separate SVG files. SVGs that just contain one simple shape are pretty small and ideal for embedding right in the CSS.

To do that conversion, we have to replace a bunch of strings, so that’s what the next function, str-replace, is taking care of. It just gives us a bit of reusable code we can use to do all those string replacements to create the data URI from the SVG tag.

Then the last two functions, leftArrow and rightArrow take care of creating the chevron shapes. I needed chevrons that pointed both left and right for the design. And yes, I probably could have worked with it even more and found a way to use the same SVG shape for all cases, but it was only two shapes and I had no issues with using two separate functions for creating the two shapes I needed.

And I can pass in any color I like to fill the SVG with that color. Endless possibilities. Here’s how that gets put to use:

And here’s how that appears:

---

Trick 4: Roll your own semantic grid system

If you’re relying on frameworks like Foundation or Bootstrap to create grid systems, you might be happy to learn how simple and easy it is to roll your own semantic grid system with Sass.

To get started, we’ll define some variables:

Here’s what each of those variables are:

1. $columns: The number of columns in our grid. 12, 16, and 24 are all popular options. I like to work on a 24-column grid for extra flexibility, but you can set any number of columns you’d like.
   
2. $page-gutter: The white-space that should appear on either side of the page around our content. Since I tend to use 24-column grids, my columns are on the narrow side. So I like to leave an entire column’s worth of white space on the left and right sides. You can choose any amount of page gutter you’d like here, though.
   
3. $column: This just defines the width of an individual column. You just divide 100% by the number of columns in your grid. For 24 columns, that comes out to a width of 4.166666666% – it’s easy to just let Sass do the math for you.
4. $gutter: The gutter spacing between columns in your grid. Some developers and frameworks define these in percentage widths, but I think those get much too narrow on smaller screens. I like to use rems so they’re relative to the font size. Which means they might get a bit narrower on smaller screens where I bump down the font size a bit, and a bit wider on larger screens where I bump the font size up a bit.
   

Now all we need is a couple more lines to make it all work:

The %row placeholder just defines the CSS necessary to make a row of our grid work. We’re using flexbox (display: flex) and enabling wrapping for maximum flexibility. We set the left and right margins of the row to the $page-gutter.

And then the @col mixin makes our columns work. We use box-sizing set to border-box so that the padding we’re adding around the columns doesn’t make them wider. Then we set the padding to the width of our $gutter divided by 2.

And finally calculate the width of the column by multiplying the width of a single column by the number of columns this element should span. That’s literally all there is to it. Here’s how we’d put this grid system to work:

Here we have a site header with site branding and a site title nested inside. On smaller screens, both the title and branding will span all 24 columns and fill the width of the screen.

If the screen is 800 pixels wide or more, the branding spans 16 columns and the title spans 8.

And that’s all there is to creating a grid system with Sass.

---

Trick 5: Using the mix function

Get the code for Trick 5

I feel like most people stumble upon the lighten and darken functions pretty early on in their Sass journeys. Just in case you haven’t come across them, they can be used to modify the lightness (or the L in HSL) of a color. But the results of using lighten and darken can be a bit more unpredictable than you might expect. Take a look at these examples:

Lightening

The lighten function is used like this: lighten($color, 10%).

Here you can see that when we start with a lighter color, it gets to pure white pretty quickly – for this shade of pink, lightening it just 30% results in pure white. But the purple color doesn’t become pure white until it’s lightened 80%.

Darkening

The darken function is used like this: darken($color, 10%).

And we see a similar issue when we’re darkening. At just 30% darker, the purple here is pure black, but the pink color needs to be darkened 80% before it’s pure black.

In some situations, having the results of creating new colors in Sass be a bit more predictable can come in really handy. And that’s where the mix function comes in.

The mix function lets us mix any two colors together. Instead of adjusting the lightness value of a color, we can instead mix the color with black or white.

Mix with white

The mix function is used to mix in white like this: mix(white, $color, 10%) where the percentage is the percentage of white (the first color) to add to the mix.

Here, the lightening is more predictable, and we don’t get pure white until we mix 100% white into the mix.

Mix with black

The mix function is used to mix in black like this: mix(black, $color, 10%) where the percentage is the percentage of black (the first color) to add to the mix.

And here we don’t get to pure black for either color until we get to 100% black in the mix.

Notice that colors created between the beginning color and black or white are different than the colors created using the lighten and darken functions. That’s because using the mix function is creating tints and shades of the original color instead of just adjusting the single lightness value.

Just for the record, Sass includes functions for adjusting the hue and saturation of colors as well as the lightness. Another good thing to know! SassMe is a great tool for experimenting with how these functions affect a color.

Blendy blendy

And mix has other fun possibilities as well – you can mix any two colors together. Here, we’re blending the pink and purple colors together, going from 0% to 100% pink.

The mix function is used to mix in two different colors like this: mix($color1, $color2, 50%) where the percentage is the percentage of the first color to add to the second color.

Get the code for Trick 5

---

The thing I really like and appreciate about Sass is how low the barrier to entry is – you can get started using Sass on your first project with just a few techniques in your pocket and then build on those more and more as you go along and use it more. I hope that these tricks will help you save time with your projects and get you thinking more about how you can really put Sass to work for you.

Image courtesy of Allen