Example: SCSS / SASS

SCSS

// SCSS
#field_2_5 {
	label.gfield_label {
		display: none;
	}
	&.here, div.ginput_container {
		margin-left: 10px;
	}
}
@import "compass/reset";

// variables
$colorGreen: #008000;
$colorGreenDark: darken($colorGreen, 10);

@mixin container {
	max-width: 980px;
}

// mixins with parameters
@mixin button( $color:green ) {
	@if ( $color == green ) {
		background-color: #008000;
	}
	@else if ( $color == red ) {
		background-color: #B22222;
	}
}

button {
	@include button( red );
	@include border( 1px solid #999999);
}

div,
.navbar,
#header,
input[type="input"] {
	font-family: "Helvetica Neue", Arial, sans-serif;
	width: auto;
	margin: 0 auto;
	display: block;
}

.row-12 > [class*="spans"] {
	border-left: 1px solid #B5C583;
}

// nested definitions
ul {
	width: 100%;
	padding: {
		left: 5px;
		right: 5px;
	}
	left: 15px;
	right: 15px;
	li {
		float: left;
		margin-right: 10px;
		.home:last-child {
			background: url(http://placehold.it/20) scroll no-repeat 0 0;
			background: url('http://placehold.it/20') scroll no-repeat 0 0;
		}
	}
}

.banner {
	@extend .container;
}

a {
	color: $colorGreen;
	&:hover { color: $colorGreenDark; }
	&:visited { color: #c458cb; }
}

@for $i from 1 through 5 {
	.span#{$i} {
		width: 20px*$i;
	}
}

@mixin mobile {
	@media screen and (max-width : 600px) {
		@content;
	}
}

SASS

// SASS
// No semi-colons, no squiggly brackets, indentation matters
#field_2_5
	label.gfield_label
		display: none
	&.here, div.ginput_container
		margin-left: 10px

@import "compass/reset"

// variables
$colorGreen: #008000
$colorGreenDark: darken($colorGreen, 10)

@mixin container 
	max-width: 980px

// mixins with parameters
@mixin button( $color:green )
	@if ( $color == green )
		background-color: #008000
	@else if ( $color == red )
		background-color: #B22222

button
	@include button( red )
	@include border( 1px solid #999999)

div,
.navbar,
#header,
input[type="input"]
	font-family: "Helvetica Neue", Arial, sans-serif
	width: auto
	margin: 0 auto
	display: block

.row-12 > [class*="spans"]
	border-left: 1px solid #B5C583

// nested definitions
ul
	width: 100%
	padding:
		left: 5px
		right: 5px
	left: 15px
	right: 15px
	li
		float: left
		margin-right: 10px
		.home:last-child
			background: url(http://placehold.it/20) scroll no-repeat 0 0
			background: url('http://placehold.it/20') scroll no-repeat 0 0

.banner
	@extend .container

a
	color: $colorGreen
	&:hover { 
		color: $colorGreenDark
	&:visited { 
		color: #c458cb

@for $i from 1 through 5
	.span#{$i}
		width: 20px*$i

@mixin mobile
	@media screen and (max-width : 600px)
		@content