Sass Features Ignored by Beginners

Sass Features Ignored by Beginners

From Beginner to Intermediate

I consider myself an intermediate level Sass user. I’ve used it enough now to know that I have written some stupid crap in Sass. I’ll take a guess that a lot of others new to Sass have done the same thing because you get excited about the stuff you can do. Like what you ask? Like nested your selectors more than three deep, or creating variables for stupid one word properties even though it would take the same amount of time to write the word out. What? OH FINE! I once created a variable $l: left; Okay? Happy? I don’t know why I did it, but variables in CSS were new to me and I was looking to shorten everything I possible could. Unfortunately it took me just as long to find the ‘$’ symbol as it did to just type the word ‘left’. But with use comes experience, and there are some cool things you can be using, and nothing all that difficult.

Extending is good

I am just finishing up a project, and came to realize that I am not leveraging the @extend directive. It is so stupid easy to use, that I actually am mad that I haven’t used it more, as it would clean up a lot of my CSS. I will plan things out a lot better in my next go at a site that I use Sass with. Anyway, what does @extend do? Well, it sort of creates virtual class. By that I mean a class that isn’t really used anywhere in the markup, but that contains a bunch of properties common to multiple classes. Let me give you an example for a bunch of different buttons.

Note that the below example assumes you are using Compass as well (cause you’d be foolish not to):

	$mainColor: red;
	$secondaryColor: green;	
 
	.buttons {
		@include border-radius (5px);
		padding: 5px 10px;
		color: $fff;
		text-decoration: none;
		font-weight: bold
	}
 
	.backButton a {
		@extend .buttons;
		background-color: $mainColor;
		&:hover {
			background-color: $secondaryColor;
		}
	}
 
	.doneButton a {
		@extend .buttons;
		background-color: #0079C2;
		&:hover {
			background-color: #666666;
		}
	}

This is just an example, but you can create classes to extend others that share common styles. Would I do this if they shared 1 or two properties? No, but three seems to be a good number to really start using @extend to shorten the amount of repitition that can go on in a style sheet.

The Ampersand is Cool

Another common feature of Sass that I think beginners either ignore or don’t really know how to use is the ampersand. I think most of us starting out get the use of it with hover, as you see in the above example, but there is another way to use it, and that is referencing a parent selctor. Where you place the ampersand changes the output of the CSS. Here is a look at a great example I got from The Sass Way:

	h1 {
		color: red;
		.highlight & {
			color: blue;
		}
	}

Which outputs this CSS:

	h1 {
		color: red;
	}
 
	.highlight h1 {
		color: blue;
	}

Now let’s put the ampersand in front:

	h1 {
		color: red;
		&.highlight {
			color: blue;
		}
	}

And you get this output in CSS:

	h1 {
		color: red;
	}
 
	h1.highlight {
		color: blue;
	}

Big difference with just the placement of the ampersand. Everyone will use it when defining pseudo-selectors, but I think a lot of us don’t even know you can use it in this method.

To Each Their Own

Unfortunately I can’t remember where I got this example, but when I saw @each being used in such a simple way, it was mind bottling:). In the below example, I am creating variable called guitarBrands, containing the names of guitar brands. Then I’m using a mixin using @each, that says for each brand in guitarBrands, do something. Once you see the CSS output, you will understand what is happening.

	$guitarBrands: ibanex peavey gibson fender esp;
 
	@mixin guitar-images {
		@each $brand in $guitarBrands {
			.guitar-#{$brand} {
				background: url("images/#{brand}.jpg") no-repeat;
			}
		}
	}
 
	.guitar-info {
		@include guitar-images;
	}

Which gives you this CSS:

	.guitar-info .photo-ibanez {
  		background: url('/images/ibanex.png') no-repeat;}
	.guitar-info .photo-peavey {
 		background: url('/images/peavey.png') no-repeat;}
	.guitar-info .photo-gibson {
  		background: url('/images/gibson.png') no-repeat;}
	.guitar-info .photo-fender {
 		background: url('/images/fender.png') no-repeat;}
	.guitar-info .photo-esp {
		background: url('/images/esp.png') no-repeat;}

Holy crap that is awesome, is it not? Granted this isn’t going to be the most used feature for me, or you most likely, but it just gives you a hint of what you can do with it.

By the Power of Sass!

Sass is awesome. Plain and simple. Out of the three items above, I think the most best in the bunch has got to be @extend. It can cut down on a ton of clutter if used properly, and make things more readable. I think one of the toughest parts in learning Sass, is when to use each feeature. Nesting too deep can get you in trouble, making ridiculous variables is just stupid, and as I found out, and for me, making a mixin for ‘font’ was beyond dumb considering it took just as long to type it out the normal way. Once you get the hang of things and crash your way through your first site using Sass, you quickly realize what you should be doing.

I also recommend reading The Sass Way’s article Sass control directives: @if, @for, @each and @while for more cool stuff. Actually, any article on that site is good.

Let me know if you have any cool tips or tricks using Sass or Compass!

Coupon Code: webmachine

Tags:

Leave a Reply