Getting SASSY

gistfile1.scss

// Creating Variables
$green: #76c044;

// Using Variables
h1 {
	color: $green;
}

// Math
h1 {
	width: (960px - 100px) * 2; // SASS can do math.
}

// Functions
h1 {
	color: darken($green, 10%); // SASS provides many functions to manipulate color
}

// Colors
h1 {
	border-bottom: 1px solid rgba(#000, .5); // SASS can take hex colors in RGBA
	background: rgba($green, 10%); // as such, SASS can also take a variable in RGBA
	color: $green;
}

// Nesting
// This is what you're used to...
h1 {
	color: $green;
}
h1 a {
	color: $green;
	text-decoration: none;
}
h1 a:hover {
	color: darken($green, 10%);
	text-decoration: underline;
}
// But with SASS, this can be simplified as...
h1 {
	color: $green;
	
	a {
		color: $green;
		text-decoration: none;
	}
	a:hover {
		color: darken($green, 10%);
		text-decoration: underline;
	}
}
// But that's not all! You can reference the parent with an ampersand
h1 {
	color: $green;
	
	a {
		color: $green;
		text-decoration: none;
		
		&:hover {
			color: darken($green, 10%);
			text-decoration: underline;
		}
	}
}

// Creating Mixins
@mixin box-sizing($value) { // mixins can have arguments...
	-moz-box-sizing: $value;
	box-sizing: $value;
}
@mixin box-sizing-border-box { // or not...
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
}
@mixin box-sizing($value: border-box) { // and those arguments can also have default values
	-moz-box-sizing: $value;
	box-sizing: $value;
}

// Using Mixins
div.full-of-awesome {
	width: 600px;
	padding: 10px;
	@include box-sizing(border-box);
}

// Content Mixins
@mixin tablet {
	@media only screen and (max-width: 720px) {
		@content;
	}
}

#wrapper {
	width: 960px;
	margin: 0 auto;
	
	@include tablet {
		width: 720px;
	}
}

// More SASS info: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html