A few months back, I wrote an introduction to Sass. Targeted at beginners, it was focused on how a person can quickly start using Sass with just a few of the features available. The premise was (and still is) that you can add it to your workflow and then expand your knowledge and usage over time.

This article is covering the basics of Sass and is targeted to the novice web developer.

Today, like most of us, I can't imagine ever going back to writing vanilla CSS. Variables alone are so very worth using Sass. And as I've begun to use a few more of the tools Sass provides, a follow up post seems appropriate. With the new year around the corner, here are a few other ways you can make your more readable and more efficient.

Nesting

Sounds pretty obvious, right? Perhaps this should have been included in my first article. But at the time, I was focused on using Sass to eliminate repeated chunks of code (variables and mixins). Since then, the power of nesting has become more clear and is another way to reduce your typing.

Instead of this:

nav {
	margin-top: 2em;
	padding: 2em 0;
}

nav li { display: inline-block; }

You can shorten this up like so:

nav {
	margin-top: 2em;
	padding: 2em 0;
	li { display: inline-block; }
}

What is really nice is that nesting in Sass is very readable. In fact, I'd make the case that it's more readable than naked CSS in this regard.

Nesting properties

Hat tip to Dan Cedarholm on this one. I had never noticed previously, but you are able to nest several properties that start with the same namespace. So if you have an element where you are specifying various text styles, you can write it like this:

nav {
	margin-top: 2em;
	padding: 2em 0;
	text: {
		align: center;
		transform: uppercase;
	}
}

I have to tell you, my OCD is off the charts with this one. I write all my styles alphabetically … to be able to nest several of those styles together. Fantastic!

Referencing parent selectors

Another way to reduce typing and the number of lines in your files is to reference parents in Sass. The most basic example is the hover state for an element.

.button {
	@include rounded-corners;
	color: $coffee;
	padding: 1em;
	
	&:hover {
		color: $tea;
	}
}

Rather than repeat the .button class name in another declaration with the :hover, I can simply include it in the styles for the element itself. This is pretty straight forward.

But there is room for confusion with this one as the syntax is not quite as straightforward. You can use the & to undo styles that were specified elsewhere in your document. What if we wanted all our buttons to be coffee colored except for one in our search form? We can do this:

.button {
	@include rounded-corners;
	color: $coffee;
	padding: 1em;
	
	&:hover {
		color: $tea;
	}
	
	.search & {
		color: #FF4400;
	}
}

Now, instead of the coffee color being applied, any element with a class of button within an element with a class of search will be a lovely bright orange.

There are a few options available. So use with caution and don't go overboard as you're learning.

Mixins, revisited

One area I've found myself looking to improve is mixins. It's easy to find yourself wanting to use an existing mixin on an element, except that you have one property that you'd like to be different. What should you do? Create a completely new mixin? Override that one property with a messy, overly specific declaration? Thankfully, no.

Mixins can accept arguments, something not mentioned in my original article. The syntax is straightforward.

In the example, I've not included all the prefixes for the border-radius property. That would be another good use of a mixin. Or, you can use a tool like Grunt to add those before deploying to production.

// First declare your mixin with an argument specified
@mixin rounder-corners($degree) {
	border-radius: $degree;
}

// Now use your mixin for an element and pass the argument
.button {
	@include rounded-corners(4px);
}

I've specified that my button element should have rounded corners and the radius should be 4 px. This is great way to use a repeatable chunk of code in various places while still allowing for unique characteristics to the element in question.

These are just 4 more examples of how useful Sass can be. And again, once you have Sass set up, you only need to incorporate a couple of these into a workflow at a time. It allows you to grow at your own pace.

Enjoy it!