SASS and Compass

Demos and Tutorials

Social Media CSS Buttons
CSS Table Styles

SASS Mixins and CSS Examples

Center Vertical
Center Horizontal
Gradients
Reset

Fix Margin Collapsing


// Method 1:
#inner
{
    display:inline-block
}

// Method 2:
#inner
{
    position: absolute;
}

// Method 3
#outer
{
    border: solid 0 transparent;
}

Border Radius

Example mixin definition:

@mixin border_radius( $tl, $tr, $br, $bl )
{
    -webkit-border-top-left-radius: $tl;
    -webkit-border-top-right-radius: $tr;
    -webkit-border-bottom-right-radius: $br;
    -webkit-border-bottom-left-radius: $bl;
    -moz-border-radius-topleft: $tl;
    -moz-border-radius-topright: $tr;
    -moz-border-radius-bottomright: $br;
    -moz-border-radius-bottomleft: $bl;
    border-top-left-radius: $tl;
    border-top-right-radius: $tr;
    border-bottom-right-radius: $br;
    border-bottom-left-radius: $bl;
}

Font Size

Example mixin definition:

@mixin font-size($size: 1, $line: $size * 1.5)
{
    font-size     : ($size * 16) + px;
    line-height   : ($line * 16) + px;
    font-size     : $size + rem;
    line-height   : $line + rem;
}

Example use:

@include font-size(1);
@include font-size(1, 2.1);

Transitions

Example mixin definition:

@mixin transition
{
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

Rotate

Example mixin definition:

@mixin rotate( $degree ){
    behavior:url(-ms-transform.htc);
    -webkit-transform: rotate(#{$degree}deg);
    -moz-transform:    rotate(#{$degree}deg);
    -ms-transform:     rotate(#{$degree}deg);
    -o-transform:      rotate(#{$degree}deg);
    transform:         rotate(#{$degree}deg);
}

Example use:

@include rotate( 5 );
@include rotate( -5 );

Breakpoints

Example mixin definition:

@mixin breakpoint( $name )
{
    // If the key exists in the map
    @if map-has-key( $breakpoints, $name )
    {
        // Prints a media query based on the value
        @media
        #{
            inspect( map-get( $breakpoints, $name ) )
        }
        {
            @content;
        }
    }
    // If the key doesn't exist in the map, throw an error.
    @else
    {
        @warn "No value found from '#{$breakpoint}'. Please make sure it is defined in the '$breakpoints' map.";
    }
}

Example map definition:

$breakpoints: (
    'small':     'min-width: 599px', // small-tablet
    'medium':    'min-width: 767px', // tablet
    'large':     'min-width: 1023px', // small screen
    'larger':    'min-width: 1280px', // widescreen
    'largest':   'min-width: 1920px', // HDTV
);

Example use:

@include breakpoint( small ){ ... }

Box Sizing Border Box

Example mixin definition:

@mixin box-sizing
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    &:before {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    &:after {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
}

Example use:

@include box-sizing;

Box Shadow

Example SASS mixin definition:

@mixin box-shadow( $values )
{
    -webkit-box-shadow: $values;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow:    $values;  /* Firefox 3.5 - 3.6 */
    box-shadow:         $values;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

Example use:

@include box-shadow( 1px 1px 1px 1px rgba(0,0,0,0.5) );

Border Radius

Example SASS mixin definition:

@mixin border-radius ( $tl, $tr, $br, $bl )
{
    -webkit-border-top-left-radius: $tl;
    -moz-border-radius-topleft: $tl;
    border-top-left-radius: $tl;
    
    -webkit-border-top-right-radius: $tr;
    -moz-border-radius-topright: $tr;
    border-top-right-radius: $tr;
    
    -webkit-border-bottom-right-radius: $br;
    -moz-border-radius-bottomright: $br;
    border-bottom-right-radius: $br;
    
    -webkit-border-bottom-left-radius: $bl;
    -moz-border-radius-bottomleft: $bl;
    border-bottom-left-radius: $bl;
}

Example use:


@include border-radius ( 5px, 10px, 5px, 0 );

Check For a SASS Variable

$some_variable: 5;
@if variable-exists(some_variable) {
    /* I get output to the CSS file */
}
@if variable-exists(nonexistent_variable) {
    /* But I don't */
}

String Interpolation

$color: "red";
$content: "This color is #{$color}";

// Using the variable:
p {
    content: $content;
}

If Else

@mixin backgroundTheme( $theme )
{
    $color: #000000;
    @if $theme == 'light'
    {
        $color: #DDDDDD;
    }
    @else if $theme == 'darker'
    {
        $color: #BBBBBB;
    }
    background-color: $color;
}
@mixin backgroundTest( $level: 0, $flag: 0 )
{
    background-color: #FFFFFF;
    @if $level == 0
    {
        background-color: #000000;
    }
    @else if $level == 1
    {
        background-color: #BBBBBB;
    }
    @else if $level == 2 and $flag == 1
    {
        background-color: #DDDDDD;
    }
    @else if $level == 3 or ($level == 4 and $flag == 1)
    {
        background-color: #E0E0E0;
    }
}

unquote

The SASS unquote method removes quotes from a string value. This allows (among other things) for a single mixin parameter to represent a dynamic list of property values.

For example, the following mixin builds a declaration of vendor-prefixed box-shadow properties by using unquote to convert a string variable into a dynamic list of property values.

@mixin box_shadow( $settings )
{
    -webkit-box-shadow: unquote( $settings );
    -moz-box-shadow:    unquote( $settings );
    box-shadow:         unquote( $settings );
}

/* Example use cases: */
.box-shadow-a { @include box_shadow( '0px 1px 1px #000000' ); }
.box-shadow-b { @include box_shadow( 'inset 0px 1px 1px -1px rgba(0, 0, 0, 0.1)' ); }
.box-shadow-c { @include box_shadow( '0px -1px 1px rgba(255, 255, 255, 0.3)' ); }

Detect Your SASS Version

sass -v

Get The Latest SASS Version

sudo gem update sass

Compass

Get Compass with Xcode Command Line Tools

On Apple machines the developer package Xcode Command Line Tools should be installed. It is part of the core apple SDK and comes with a number of useful tools.

Open Terminal.
Check for an existing Xcode install by attempting to run the gcc compiler command line tool included with Xcode:

gcc --version