SASS

Hack CSS like a boss

SASS: Introduction

Pre-processor
Enhances CSS with programming idioms
Originally a Ruby Gem
Libsass: compiler written in C
Syntactically Awesome StyleSheets

Variables

    
        $width: 1024px;

        .page-content {
            width: $width;

            .section-header {
                font-size: 1em;
            }
        }

Operators

String concatenator

    
        $icon-code: "0030";

        .icon-help {
            &:after {
                content: "\u" + $icon-code;
            }
        }

Mixins

    
        @mixin border-radius($radius) {
            -webkit-border-radius: $radius;
            -moz-border-radius: $radius;
            -ms-border-radius: $radius;
            border-radius: $radius;
        }

        .panel {
            @include border-radius(3px);
        }

Maps

    
        $font-stack ($font-family: 'Helvetica, Arial', $font-size: 20px);

    
        @mixin set-font($font-family, $font-size) {
            font-family: $font-family;
            font-size: $font-size;
        }

        h1 {
            @include set-font($font-stack);
        }

Lists

    
       $panel-shadow (2px 2px 2px rgba(0,0,0,0.2));

       .panel {
            @include box-shadow($panel-shadow);
       }

Directives

`@if`

    
        @mixin set-size($value) {
            @if $value == 'monster' { font-size: 10em }
            @if $value == 'mouse' { font-size: 2em }
            @else  { font-size: 4em }
        }

        h1 {
            @include set-size('monster');
        }

    
        h1 { font-size: 10em;}

`@each`

    
        @each $beer in golden, amber, dark {
            .#{$beer}-beer-icon {
                background-image: url('/icons/beers/#{$beer}.png');
            }
        }

    
        .golden-beer-icon {
            background-image: url('/icons/beers/golden.png');
        }
        .amber-beer-icon {
            background-image: url('/icons/beers/amber.png');
        }
        .dark-beer-icon {
            background-image: url('/icons/beers/dark.png');
        }

`@extend`

    
        .error {
            border: 1px #f00;
            background-color: #fdd;
        }
        .seriousError {
            @extend .error;
            border-width: 3px;
        }

    
        .error {
            border: 1px #f00;
            background-color: #fdd;
        }
        .seriousError {
            border: 1px #f00;
            background-color: #fdd;
            border-width: 3px;
        }