If you’ve followed along the WDS blog/Github/Twitter etc, you’ll know pretty well by now we’re a team that uses Sass as a part of our daily workflow for front-end styling. Sass is a powerful CSS preprocessor tool and it’s awesome. If you’re late to the game or new to front-end development there are lots of great resources for getting started with Sass.
Please note: This post will assume that you have at least a basic understanding of Sass and have used it at least a handful of times.
Today, we’ll be skipping over some of the basics like variables, nesting, and partials and get to some of the more intermediate working of Sass, specifically mixins, and we’ll touch on placeholders briefly as well. Mixins are a fantastic way to create and package blocks of reusable code so that you don’t have to continuously write out items that can become repetitive and sometime tedious (not to say they’re not important).
Before we completely dive into some cool mixins I’ve come across and libraries to checkout, I will quickly touch on placeholders vs. mixins. There’s been quite a bit of discussion around the web on the topic, but it’s a bit all over the place, so I wanted to cover some of what I found while doing some research for this post.
I think this first post by Hugo Giraudel speaks to front-end development work in general: “It depends.”
Hugo goes on to say:
The best advice would be: if you need variables, use a mixin. Otherwise, extend a placeholder. (placeholder vs mixin).
I think that’s solid advice and typically how I approach the topic as well. What’s also worth noting here is that Shay Howe did some pretty extensive research on the topic, the results of which I found as surprising as he did in his article, “Sass Mixins vs Extends the Data.”
It seems as though big picture, mixins create a bit more bloat in the compiled output and that they resulted in faster load time overall, which was interesting and seemed noteworthy as that’s an important detail not to be overlooked.
Despite that discovery, I still think both have their place and can be useful in certain projects. More or less, that puts us back to where we started–it depends on the project and situation, as always! With all front-end development, as long as it works, makes sense, and has been carefully thought through, there’s no reason not to use both in a given project from my perspective.
Here at WDS, we have several useful mixins included in our wd_s theme that are worth checking out. They’re particularly useful for our most common use cases. In this post, I will highlight some additional useful (less common) mixins that I’ve come across and used before. We haven’t necessarily included them in wd_s (at least not yet), because we intentionally keep things relatively lean there.
If you’re new to mixins, it would be wise to make sure you have a basic understanding. The following list is by no means comprehensive, but I tried to find a few that we’ve either used here at WDS or didn’t appear on every other list of “Top 10 Mixins that Should Be in Your Toolbox Post.” That’s not to say they won’t appear in other places–they are just not quite as common as breakpoint mixins or px to rem conversions.
Cross Browser Opacity Mixin
We all know cross browser compatibility is certainly improving with modern browsers, but even today, the struggle is real, and there are lots of projects that still require backwards compatibility for various reasons. This one should work all the way back to and including IE6.
@mixin opacity($opacity) {
$opacity-ie: $opacity * 100;
filter: alpha(opacity=$opacity-ie); //IE8
opacity: $opacity;
}
//Usage
.faded-text {
@include opacity(0.8);
}
Centering Mixin(including a new Fancier Version for Vertical/Horizontal/Both options)
Centering elements vertically, horizontally, or in some cases both axis, can always be a bit of a struggle for a variety of reasons. This mixin requires the parent element to have a position of relative to work and the mixin should be applied to the child element you’re trying to center vertically/horizontally or both. Here is the mixin–and be sure to check it out in its full glory on CSS-tricks.com.
@mixin center($horizontal: true, $vertical: true) {
position: absolute;
@if ($horizontal and $vertical) {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} @else if ($horizontal) {
left: 50%;
transform: translate(-50%, 0);
} @else if ($vertical) {
top: 50%;
transform: translate(0, -50%);
}
}
Font Stack Mixin
This is particularly useful for combining fonts and font weights. I find this one super useful for when you have to manage multiple fonts and weights throughout a project. It’s also super useful also if you are working in a multilingual project and certain languages require different fonts within the same project. Hat tip to Stacy Kvernmo, the original creator of this.
Title Border
This may not be an everyday use case mixin, but it was used on a recent project and came in pretty handy considering the number of times we had to implement a partial title border that didn’t need to be flexible depending on which section of the site or particular page a user might be visiting. This particular version has a number of arguments you can pass through which was a nice touch and well done. Hat tip to fellow teammate Allison Tarr on this one.
// Title Border
// Apply a short border beneath a title
// Usage @mixin title-border(color);
@mixin title-border($color, $height, $width, $position) {
@if $position == center {
$position: 0 auto;
} @else {
$position: 0;
}
&:after {
border-bottom: $height solid $color;
content: '';
display: block;
margin: $position;
padding-bottom: rem(15);
width: $width;
}
}
//Use Case:
.h1 {
@include title-border($color, rem(5), rem(85), left);
}
Sticky Footer:
While poking around on CodePen, I came across this sticky footer mixin by Zoe Rooney. I quite like this and could see some practical use cases for this being used as we begin (hopefully) the trend away from hamburger menu for navigation. As mobile phone use continues to grow each month for everyday web browsing, this seems like a very practical application.
Tooltips:
Although I will say I’m not a super huge fan of tooltips, there are some fairly good use cases for them from time to time throughout a project so long as they’re not abused. This tooltip mixin uses only HTML and CSS(SCSS), and is a nice combination of a few mixins to make this a well done reality.
These are just a few mixins and use cases for them. In addition to these, and the ones in our wd_s starter theme, there are a number of libraries worth looking into as well for mixins and may already be incorporated into your workflow, like Bourbon.io (part of wd_s).
Some noteworthy libraries to also check out. Full disclosure: I’ve not thoroughly gone through all of these but they look worthy of investigating further:
- http://cssowl.owl-stars.com/
- http://gillesbertaux.com/andy/
- https://github.com/matthieua/sass-css3-mixins
- http://sassmatic.com/
- http://unicorn-ui.com/buttons/builder/
Sass mixins are undoubtedly powerful and useful for building all types of sites. Do you have any mixins that you particularly like or use often that you’ve found helpful for your own projects? If so, feel free to share them in the comments! We’d love to hear from you!