Example: 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;
	}
}