SCSS + Compass in Action

scss-and-compass-snippets.scss

/* ---------------------------
# Transitions 
  http://compass-style.org/reference/compass/css3/transition/
--------------------------- */

// single-transition($property, $duration, $function, $delay)
@include single-transition(all, 0.2s, cubic-bezier(.17,.67,.83,.67), 100ms);


/* ---------------------------
# Transforms 
  http://compass-style.org/reference/compass/css3/transform/
--------------------------- */

@include transform( translate3d(-100%, 0, 0) );

/* ---------------------------
SassScript Control Directives
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#control_directives
--------------------------- */

// @each block. Example creating custom classes based on list of image filenames
@each $image in dance1, dance2, audio, design1, fashion2, fashion3, film1, gamedesign1, /*... ad infinitum*/ {
  .banner__#{$image} {
		background-image: url('../images/#{$image}.jpg');
	}
}