Tame Your CSS3 with Sass

Huh? What? Sass?

Organization

Break your CSS into includes, Sass zips them all up into a single CSS file and can compress it too!

Write comments that don't end up in your production style sheet.

		// Single line comment in CSS!
		@import "_header.scss";
		@import "_main.scss";
		@import "_sidebar.scss";
		@import "_footer.scss";
	

Nesting

Nesting allows you to... well... "nest" selectors within other selectors. You are essentially packaging selectors together into groups.

Nesting helps organize your stylesheet and can make writing and maintaining specificity easier.

		.widget {
			color: white;
			a { color: blue; }
		}
	

Variables

Seriously... do I really need to explain to you why variables are awesome? Did you not like Algebra?

Variables are the foundation of keeping your CSS DRY.

Update your entire stylesheet by changing one line. Hell yea!

		$big: 24px;
		$awesome: #FE57A1;
		.widget { font-size: $big; color: $awesome; }
	

Parent Reference

When nesting selectors you can reference the parent
with the "&".

Perfect for nesting pseudo selectors!

		a {
			color: $awesome;
			&:hover {
				color: white;
				background-color: $awesome;
			}
		}
	

Color Functions

Math? Please... who needs it. Let Sass figure it out for us!

Darken, lighten, saturate, desaturate, mix, complement and invert.

		a {
			background-color: $awesome;
			&:hover {
				background-color: darken($awesome, 20%);
			}
		}
	

Extending Classes

CSS3 means writing vendor prefixes over and over again. It sucks. Extending makes it not suck!

Yes, you could just add classes to your HTML, but shame on you. Let Sass extend classes and keep that HTML semantic.

		.round {
		  -webkit-border-radius: 10px;
		  -moz-border-radius: 10px;
		  border-radius: 10px;
		}
		.widget { @extend .round; }
	

Mixins

Mixins are a lot like functions. Use mixins for any block of related styles that you want to apply again and again.

Mixins will make you breakfast in the morning. True story.

		@mixin hotness {
 			display: block;
 			color: $awesome;
 			&:hover { color: darken($awesome, 20%); }
			@extend .box-shadow;
		}
		.widget a { @include hotness; }
	

Arguments

Remember one slide ago when I said mixins are like functions... well just like real functions you can pass arguments to a mixin to change it when needed.

		@mixin shadow($color) {
			-webkit-box-shadow: 0px 2px 5px $color;
			-moz-box-shadow: 0px 2px 5px $color;
			box-shadow: 0px 2px 5px $color;
		}
		.widget { @include shadow(#333); }
	

Mixin vs Extending. Fight!

Question:
So when should I extend a class and when should I use a mixin?

Mixin vs Extending. Fight!

		.round { border-radius: 10px; }
		.widget { @extend .round; }
		.container { @extend .round; }
		// this compiles to...
		.widget, .container { border-radius: 10px; }
	

		@mixin round { border-radius: 10px; }
		.widget { @include round; }
		.container { @include round; }
		// this compiles to...
		.widget { border-radius: 10px; }
		.container { border-radius: 10px; }
	

RGBA & HLSA Functions

Adding an alpha channel to your colors is cool. Having Sass calculate it for you is cooler than a... really... cold... uh... thing.

If you want to be a true playa Sass has HLSA functions too. Yea boy!

		$awesome: #FE57A1;
		.overlay {
			background: transparentize($awesome, .5);
		}
		.widget {
			background: hlsa(256, 80%, 50%, 0.4);
		}
	

Argument Defaults

Want to use arguments in your mixin only some of the time? Set up some default values for your mixin!

		@mixin gradient($c1: #FFF, $c2: #000) {
			background-image:
				linear-gradient(top, $c1, $c2);
		}
		.widget { @include gradient; }
		.button {
			@include gradient(
				$awesome, darken($awesome, 20%)
			);
		}
	

Control Directives & Interpolation

Use logic like: if, else, for, each and while. This stuff is so hard core it scares me!

A typical use of interpolation is to manipulate strings.

		@mixin gradient($c1, $c2, $image:false) {
		  $i: "";
		  @if $image { $i: "url(#{$image}), " }
		  background-image: #{$i}linear-gradient(
		    top, $c1, $c2
		  );
		}
	

One more thing...

If you think Sass is going to change your life just add Compass to your workflow and watch your head explode from the awesomeness.

• Robust CSS3 mixins
• Helper functions for URLs and sprites
• Compass thinks about cross browser compatibility so you don't have to.
• Blueprint Framework if you're into that sort of thing.

Now Go Rock the Casbah with Sass

sass-lang.com - official Sass site

compass-style.org - official Compass site

thesassway.com - a hot new blog all about Sass

@lesjames - tweet me up to chat Sass anytime

Thanks for listening! Good night!