SCSS Style Guide attempt 1

gistfile1.scss

// List each selector on its own line
.foo-bar,
.widget-baz {
	// List these 4 attributes in a section at the top
	// List them in this order
	position: absolute;
	left: 10px;
	top: 10px;
	// Store z-index in a central location
	z-index: $foo-bar-z-index;

	// List the block styles in a section
	// List the mixins at the top of a section
	@include box-sizing(border-box);
	// Use PIE clearfix instead of overflow
	@include pie-clearfix;
	height: 100px;
	width: 200px;
	
	// Put the list style separately
	list-style: none;
	
	// List the inline styles as a section
	// Put the line-height first
	line-height: 1.5em;
	// Put the font-size second
	font-size: 14px;
	color: $foo-bar-color;
	
	// Styles that are purely decorative are in their own section
	@include border-radius(4px);
	background: $foo-bar-background-color;
	
	// Add concatenated selectors at the bottom of the parent rules using &
	&.active {
		background: $foo-bar-active-background-color;
	}
	
	// Add nested selectors below concatenated selectors
	h1 {
		display: inline;
		
		color: $foo-bar-heading-color;
	}
}