Calculating EMs with SCSS

Posted by Garrett on

Earlier this year we made the switch to SCSS and I’ve really loved what its done to our front-end workflow. One thing I’m particularly fond of is how SCSS has improved how we’re calculating EMs.

The olden days

Before SCSS we’d simply make our EM calculation and leave a comment explaining where that number came from off to the side. This worked fine, but could be time consuming and was a nightmare when adjusting things like, say, our base-font.

Here’s an example:

h1 {
    font-size:1.875em; /* 30 / 14 */
}

Using SCSS for calculations

To calculate EMs with SCSS we have a few options; using the basic number operations or defining our own function, to name a few.

Basic number operations

Using basic number operations we can drop the commenting that is needed with standard CSS and used the code as documentation. This is the technique we originally used when we switched to SCSS. This works, but we can do much better

h1 {
    font-size:(30 / 14) * 1em;
}

Defining our own EM calculation function

SCSS has tons of built in functions for common calculations, and we can even make our own. Here’s a function we’re using to calculate EMs, which is a modification of one we found in The SASS Way.

@function em($target, $context: 14) {
    @return ($target / $context) * 1em;
}

This function takes 2 variables, $target and $context. $context is optional, as it defaults to 14, our base-font. Now lets rewrite our example using our new function:

h1 {
    font-size:em(30);
}

This is the same as saying (30 / 14) * 1em but now we don’t have to repeat ourselves all over the stylesheet.

But wait, this can be taken a step further.

Adding variables to our EM calculation. Vuala!

We can modularise this process more by defining default variables for our base-font size, heading sizes, etc. With these in place, tasks like “adjusting the base-font” can be done in a matter of seconds.

$basefont:14;
$baseh1:30;
@function em($target, $context: $basefont) {
    @return ($target / $context) * 1em;
}
h1 {
    font-size:em($baseh1);
}

Beautiful. Checkout the SCSS config file in Erskine’s Ultimate Package for more examples of how you can take advantage of default variables in SCSS.

More Articles

Donkeytail plugin for Craft CMS

Posted by Garrett

Today we released the lite version of Donkeytail, a Craft CMS plugin we’ve been using internally for a few months now. Donkeytail stems from a need we had to content manage dots on images. Maps come up a lot in our world. From maps for new development projects to maps for hiking trails through the Scottish Highlands, and most of the time it makes more sense to roll our own system for design… Read More »

Inaugural #CraftCMS meetup in Dallas

Posted by Garrett

Yesterday we hosted the inaugural #CraftCMS Dallas meetup by our friends at Busy Noggin — complete with lots of pizza, Twig and general website chatter. A good time was had and we’re looking forward to being a part of the growing Craft CMS community here in Dallas. If you missed it but are into Craft, don’t fret - there’ll be plenty more to come. If you’ve not used Craft but are… Read More »

Bob’s your uncle!

Posted by Garrett

A hearty welcome to the latest additions to our growing family, Steve Sharpe and Gavin Platt. Steve’s in Nottingham with Chris, and Gavin’s from wherever he’s calling home this week (though his mailing address is in Leeds). Steve’s our new in-house engineer — building anything from complex enterprise applications to native apps for iOS and Android. Gavin joins us after 10 years as a self… Read More »

Why our clients love Craft

More and more people are discovering Craft. With big names like the Associated Press, Netflix, and Agatha Christie moving to Craft, the future looks bright. There’s a lot out there on what makes Craft great from a technical standpoint, but Craft is great for non-technical users, too. Here are the biggest reasons… Read More »

View All Articles

Envelope Icon

Join Our Newsletter

We don’t send them often, but you’ll want in on this action when we do.

Are you a design agency looking for a web development partner?

We can help