I’m a big fan of SASS and Compass, two tools which help you write CSS better and faster. I previously wrote about managing color variables, and today I’d like to take it one step further and talk about mixins and functions.

At their core, mixins and functions are both blocks of code that you define once and can then re-use anywhere.

The difference is that a mixin is called with @include and injects its contents whenever it’s called, while a function is called without any special keyword and returns a value. You can find more info about the difference in this article.

Compass is a library of mixins for SASS, and it includes some very useful stuff like border-radius and box-shadow. But of course, you can also define your own mixins and functions. So here are a couple useful ones that I re-use on every project.

---

Black & White

Let’s say you need some 90% opacity white text on a 15% black opacity background. With regular CSS, you’d have to write all this:

.my-class{
	background:rgba(0,0,0,0.15);
	color:rgba(255,255,255,0.9);
}

SASS to the rescue! Let’s set up two very simple functions:

@function black($opacity){
	@return rgba(0,0,0,$opacity)
}
@function white($opacity){
	@return rgba(255,255,255,$opacity)
}

Now all I need to write is:

.my-class{
	background:black(0.15);
	color:white(0.9);
}

This saves me a ton of time all throughout my stylesheets. As an added bonus, using transparent instead of opaque colors make your elements blend in together better, and your design more coherent.

---

Emboss & Letterpress

Although the design world seems to be slowly moving away from pseudo-realism thanks to Microsoft’s Metro UI (who would’ve thought!), shadows and highlights are still very useful tools for web and UI design.

The only problem is that CSS shadows are clumsy. Compass does take away some of the pain of using them thanks to its box-shadow mixin, but we can do even better.

It won’t take you long browsing Dribbble to realize that 90% of shadows and highlights are the same type: semi-transparent one-pixel lines placed above and below an element to give the illusion it’s embossed in its parent. Here’s what I mean:

Here’s a simple mixin to make creating that kind of effect a breeze:

@mixin box-emboss($opacity, $opacity2){
	box-shadow:white($opacity) 0 1px 0, inset black($opacity2) 0 1px 0;
}

Now all you need to do to achieve the effect above is:

.box{
	@include box-emboss(0.8, 0.05);
}

Similarly, another common effect is the “letterpress” style, where the same “embossing” effect is applied to text. The thin white line not only simulates letterpress printing, but also makes the text more readable by providing a sharper separation between the letters and their background:

Here’s the mixin to do that:

@mixin letterpress($opacity){
	text-shadow:white($opacity) 0 1px 0;
}

---

Hiding Text and Image Replacement

Up to now we’ve used mixins and functions for visual elements. But they can also help with the more hidden, trickier side of CSS.

For example, a common task is hiding an element’s text and displaying an image using the CSS background property instead. It’s often used on logos, buttons, etc.

Here’s our mixin:

@mixin hide-text{
	overflow:hidden;
	text-indent:-9000px;
	display:block;
}

And I can just use it like this;

.logo{
	background: url("logo.png");
	height:100px;
	width:200px;
	@include hide-text;
}

As with everything on the web, browser support keeps evolving and things move fast. In fact, I just saw that Nicolas Gallagher now uses a different method.

With regular CSS, we’d have to somehow remember every element that uses this image replacement pattern and meticulously change the code line by line.

But with our technique, we can just replace the mixin itself and we’re done!

@mixin hide-text{
	font: 0/0 a;
	text-shadow: none;
	color: transparent;
}

---

Horizontal Navigation Lists

Another common CSS pattern is using unordered lists for navigation purposes. This usually means you want to strip them of their formatting, and display list items horizontally.

Instead of writing the same code for every nav bar, just use a mixin:

@mixin navigation-list {
	list-style-type:none;
	padding:0;
	margin:0;
	overflow:hidden;
	> li{
		display:block;
		float:left;
		&:last-child{
			margin-right:0px;
		}
	}
}

This mixin introduces two important concepts of SASS: nested rules and the “&” sign.

Nested rules simply mean that you can skip rewriting the parent selector every time. So:

ul{
	color:red;
}
ul li{
	font-weight:bold;
}

Can be rewritten as:

ul{
	color:red;
	li{
		font-weight:bold;
	}
}

And the “&” sign is simply a shortcut for the current element. So in this code:

a.my-link{
	color:red;
	&:hover{
		color:blue;
	}
}

& is a shortcut for a.my-link.

Going back to our navigation-list mixin example, this means a single mixin can affect more than one CSS element!  When you combine this with the “&” symbol, it can become very powerful.

---

Moving On

Compass has a ton of useful mixins (in fact, in turns out most of these are already in there). So it’s a great resource to explore, and it will help you take your CSS to the next level!

And of course, if you’ve got your own favorite mixins and functions, please share them in the comments!

(As always, you can upvote/comment on this post over at Hacker News, too)