A sample SCSS file which describes the formatting guidelines of the CMS module.

SilverStripe CMS CSS Coding Conventions.css

/** 
 * Description of the file and what it covers. 
 * 
 * If there are any items you need to finish or which 
 * people need to be aware of use @todo like below, remember 
 * to remove the @todo's once you have completed them 
 * 
 * @todo Finish. 
 */ 

/** 
 * VARIABLES
 * -----------------------------------------------------------
 *
 * Include any SCSS variables at the top. What is a good variable? well
 * it's something that would be used module wide that may change
 */
$margin: 16px;
$vertical: 16px;
$black: #11111; 

/** 
 * HELPERS
 * -----------------------------------------------------------
 *
 * Include any helper classes and mixins next 
 * this helps people quickly read what is available 
 */
.left { 
	float: right; 
} 

@mixin left($dist) { 
	float: left; 
	margin-left: $dist;
} 

/**
 * FORMATTING
 * -----------------------------------------------------------
 *
 * Write your CSS on separate lines (yes I know it doesn't 
 * look pretty on our big screens but otherwise with 
 * scss it just gets messy and avoid conflicts when merging
 *
 * If your selector has 1 style then you can keep it on the same line.
 * 
 * Always put a newline after the braces ({,})
 *
 * Always use hard tabs (not spaces)
 *
 * Always end your statement lines with a semi colon.
 * 
 * You can put related styles on the same line. This includes 
 * display, width, height 
 * position, top, left, right 
 * text-align, text-indent 
 * 
 * Don't worry about taking up extra space with the lines. The 
 * Compass module generates a compressed file. 
 */

body { 
	font: 12px/24px bold Comic Sans; 
	margin: 20px auto; padding: 10px auto; 
	background: #9a3
} 

#container {
	position: absolute; top: 10px; left: 10px;

	.nav-logo { margin-left: 10px; }
}

/** 
 * INDENTATION
 * -----------------------------------------------------------
 *
 * Indent your sub selectors but with SCSS you embed it. 
 * Don't go overboard being specific. If it's a common style 
 * use a mixin or a helper class. 
 * 
 * Use a line break between the end of the styles and the nested 
 * option 
 */
#header { 
	@include left(10px); 
	width: 1200px; height: 400px; 

	p { color: #fa9; }
} 

#footer { 
	p { color: #9ac; }
} 

/** 
 * COMMENTING 
 * -----------------------------------------------------------
 *
 * When including comments either use the full style (like this) 
 * ONLY when you are outside a selector. 
 * 
 * If you are inside a selector then use the simple // comments 
 * even for multi line. Do not use /*
 */
#left-column { 
	@include left(10px); 
	// add a border on the right hand side 
	// to make it pretty 
	border-right: 1px dashed pink;
}

/**
 * NAMING CONVENTIONS
 * -----------------------------------------------------------
 * 
 * For both class names and ID names use lower dashed case. If there is
 * elements which don't produce lower dash case alert a developer.
 */
#header-container {
	.arrow-left { font-weight: bold; }
	.arrow-left-option { text-indent: 1px; }
}