Table of Contents

A Snippet of Sass

(Check out my previous post on Sass here)

I’ve just started diving into the more advanced features of Sass, and I’m even more in love than before. For some background: I really, really hate vendor prefixes. Having to define anywhere from 3 to 5 versions of a rule just to achieve a consistent result (gradients, anyone?) drives me insane and makes my stylesheets cluttered. So that’s when I jumped for joy when I read about Sass mixins. Mixins allow you to re-use styles by defining the mixin, and then including it in any other rules as you see fit. So, I wrote the following:

	@mixin border_radius($rad) {
		-webkit-border-radius: #{$rad}px;
		-moz-border-radius: #{$rad}px;
		border-radius: #{$rad}px;
	}

There’s a few things going on here. Not only do I have a reusable block of CSS (which I’ll explain in a second), but there’s also support for parameters! This is starting to look a lot like a traditional function. I wonder if there’s support for default arguments…after a bit of research, it turns out there is! You just have to declare it like a traditional Sass variable, which threw me off:

	@mixin border_radius($rad: 10) {
		-webkit-border-radius: #{$rad}px;
		-moz-border-radius: #{$rad}px;
		border-radius: #{$rad}px;
	}

Now, if no value is supplied, it will default to 10px. You may notice the syntax of the properties is a little funky. That’s whats called interpolation, and it inserts the variable into the property name or selector ($radpx doesn’t work).

I don’t know about you, but this may be the coolest feature I’ve ever seen for writing CSS. I wrote additional mixins for gradients and box-shadow, and now instead of vendor prefixes and multiple versions of rules cluttering up my stylesheet, all I have to do is something like

	.wrapper {
		@include border_radius(5);
	}

And you’re done! Sass will automatically put the expanded CSS in the rule for you. Magic!

 As an extra goodie, here’s the code for my box_shadow mixin. Enjoy!

My Toolbox Overfloweth

I was recently gifted a domain name of my very own, just about the worst thing you could give a busy college student. Naturally, homework took the back seat as I decided what to do with my new playground. I decided I would create a basic portfolio site to show off some things I’ve done and shamelessly promote myself, but the goal was less about the end result but instead the process of getting there, as this would be my first major personal project. As a web designer and developer in training, I’m almost obsessed in making sure that I learn only the best practices and adopting the best habits in my work, and I wanted to build my site using the most modern and bleeding-edge tools.

Read More