Sample code for "10 things I love about Sass"

10.scss

article {
    $base_font_size: 12px;
    $base_line_height: $base_font_size * 1.5;
 
    font-size: $base_font_size;
    line-height: $base_line_height;
 
    /* simple math */
    h1 { font-size: $base_font_size * ($base_line_height + 1); }
    h2 { font-size: $base_font_size + 4px; }
}
 
/* some looping with conditional logic */
@for $i from 1 through 10 {
    #flickr_badge_image#{$i} {
        @if $i % 2 == 0 {
            color: #3993FF;
        } @else {
            color: #ff1c92;
        }
    }
}

1a.css

#container .post code,
#container .post tt,
#container .post pre {
    font-family: Consolas, Courier, monospace;
}

1b.scss

#container .post {
    code, tt, pre {
        font-family: Consolas, Courier, monospace;
    }
}

2a.css

.styledText {
    font-family: Georgia, Times, serif;
    font-style: oblique;
}

2b.scss

.styledText {
    font: {
        family: Georgia, Times, serif;
        style: oblique;
    }
}

3.scss

/* CSS: */
@import url("_reset.css");
 
/* Sass: */
@import "reset";

4.scss

$theme_accent: #771100;
$theme_bg: #222222;
 
#container {
    h1, h2, h3 { color: $theme_accent; }
    .post {
        border: {
            $accent_border: 1px $theme_accent;
            $dark_border: 1px $theme_bg;
 
            top: $accent_border;
            left: $accent_border;
            bottom: $dark_border;
            right: $dark_border;
        }
    }
}

6.scss

@mixin rounded-top {
    $side: top;
    $radius: 10px;
 
    border-#{$side}-radius: $radius;
    -moz-border-radius-#{$side}: $radius;
    -webkit-border-#{$side}-radius: $radius;
}
 
#navbar li { @include rounded-top; }
#footer { @include rounded-top; }

9.scss

$my_color: #77110;
.post-title { color: saturate($my_color, 15%); }

@see http://blog.founddrama.net/2010/08/10-things-i-love-about-sass/