@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); } 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; } li { float: left; margin-right: 10px; .home { 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; } }