Quick examples of valuable SCSS techniques

gistfile1.scss

// Running compass with the following flags during the talk
// $ compass watch -s expanded



////////////////////////////////////////////////////////////
// 1. Difference between MIXIN and PLACEHOLDER

// A placeholder does not duplicate the CSS rules for each selector, but applies all selectors to one set of CSS rules by comma separating the selectors
// ex:  .example1, .example2 { ... some css rules... }
%example-placeholder {
	text-transform: uppercase;
	text-align: center;
	background: #bbbdc0;
	color: #303133;
	padding: 4px 0 3px;
}

// A mixin duplicates the CSS rules for each selector
// ex: .example1 { ... some css rules ...}    .example2 { ... some css rules } 
@mixin example-mixin ($color, $font-size) {
	color: $color;
	font-size: $font-size;
	@extend %example-placeholder;
}


.example {
	@include example-mixin(red, 12px);
}

.example2 {
	@extend %example-placeholder;
}

// Basic rule is: if you're using variables then put them in a @mixin, and if you're not using variables it's an indicator that you probably need a %placeholder

////////////////////////////////////////////////////////////
// 2. Arrays
// #{$abr}  evaluates to "BUF" as a PROPERTY 
// $abr evalues to "BUF" as a VALUE 
// nth($array, $integer)  chooses the cell position - note that it is 1-index based (not 0-index based)
$teams:
	(
		("BUF", #000),
		("MIA", #f00),
		("NE", black),
		("NYJ", green)
	);

@each $team in $teams {
	$abr: nth($team, 1);
	$color: nth($team, 2);

	.#{$abr} {
		color: $color;
	}
}


////////////////////////////////////////////////////////////
// 3. Sprites
// See http://compass-style.org/reference/compass/helpers/sprites/ for overriding default values such as spacing, position, and repeat
$icons-sprite-dimensions: true; // include icon dimmensions in icon class
$icons-spacing: 30px; // padding around each icon 
@import "example-sprite/icons/*.png"; // import a folder of icons

@include all-icons-sprites; // creates the actual sprite out of all the icons in the folder (otherwise i believe it's automated based on usage)
$icons: sprite-map("example-sprite/icons/*.png"); 

// you can use class="down-arrow" in your HTML or use the sprite like a mixin
.my-button {
	@include icons-sprite(down-arrow); // include the down-arrow icon like a mixin
}

////////////////////////////////////////////////////////////
// 4. Prepending classes (keeps logical structure or flow of your CSS more legible )
// based on the examples below, the best use of this feature is with Modernizr type feature detection, degredation, or enhancement 

.ie8 {
	display: none;
}

.example {
	color: red;

	.ie8 & {  // compiles to  .ie8 .example { color:blue}  
		color: blue;
	}
	
	.no-csstransitions & {
	  display: none; // compiles to .no-csstransition .example {display:none}  
	}
}