SASS: susy/html5-boilerplate starter

_base.scss

// This file must be imported before loading html5-boilerplate
// Imports -------------------------------------------------------------------

@import "compass/css3";
@import "compass/typography/vertical_rhythm";

// Grid (http://susy.oddbird.net/) -----------------------------------------------------
//

@import "susy";
$total-cols             : 12;
$col-width              : 4.125em; // 66 / 990 * 100 = %
$gutter-width           : 1.125em; // 12 / 990 * 100 = %
$side-gutter-width      : 2.813em; // 45 / 1080 * 100 = % | 2.813em

$show-grid-backgrounds  : true;

$container-width:1080px;

// base
$line-height: 1.231 !default;
$font-color: rgb(51,51,51) !default;

$link-color: #00e !default;
$link-hover-color: #06e !default;
$link-visited-color: #551a8b !default;

$selected-font-color: #fff !default;
$selected-background-color: #ff5e99 !default;

$invalid-background-color: #f0dddd !default;

// Yahoo! font sizes (http://developer.yahoo.com/yui/fonts/) ---------------------------

$base : 16;
//pixel size / base size * 100 = %
$px8 : (8 / $base * 100) + unquote('%');
$px9 : (9 / $base * 100) + unquote('%');
$px10 : (10 / $base * 100) + unquote('%');
$px11 : (11 / $base * 100) + unquote('%');
$px12 : (12 / $base * 100) + unquote('%');
$px13 : (13 / $base * 100) + unquote('%');
$px14 : (14 / $base * 100) + unquote('%');
$px15 : (15 / $base * 100) + unquote('%');
$px16 : (16 / $base * 100) + unquote('%');
$px17 : (17 / $base * 100) + unquote('%');
$px18 : (18 / $base * 100) + unquote('%');
$px19 : (19 / $base * 100) + unquote('%');
$px20 : (20 / $base * 100) + unquote('%');
$px21 : (21 / $base * 100) + unquote('%');
$px22 : (22 / $base * 100) + unquote('%');
$px23 : (23 / $base * 100) + unquote('%');
$px24 : (24 / $base * 100) + unquote('%');
$px25 : (25 / $base * 100) + unquote('%');
$px26 : (26 / $base * 100) + unquote('%');
$px27 : (27 / $base * 100) + unquote('%');
$px28 : (28 / $base * 100) + unquote('%');
$px29 : (29 / $base * 100) + unquote('%');
$px30 : (30 / $base * 100) + unquote('%');
$px31 : (31 / $base * 100) + unquote('%');
$px32 : (32 / $base * 100) + unquote('%');
$px33 : (33 / $base * 100) + unquote('%');
$px34 : (34 / $base * 100) + unquote('%');
$px35 : (35 / $base * 100) + unquote('%');
$px36 : (36 / $base * 100) + unquote('%');
$px37 : (37 / $base * 100) + unquote('%');
$px38 : (38 / $base * 100) + unquote('%');
$px39 : (39 / $base * 100) + unquote('%');
$px40 : (40 / $base * 100) + unquote('%');


//resets the page width
@mixin pagewidth($size:1080) {
    width : #{($size / $base)}em;
}

//animates properties via css3 
@mixin animate($property : all, $duration : 1000ms, $easing: ease-in, $delay : 0){
	@include transition-property($property);
	@include transition-duration($duration);
	@include transition-timing-function($easing);
	@include transition-delay($delay);
}

//nice rounded buttons
@mixin buttonize($button_size: 24px, $bgcolor : #333) {
    @include box-sizing(border-box);
    .ie7 &{
        *behavior: url(js/boxsizing.htc);
    }
    background:$bgcolor;
    color: #fff;
    text-decoration: none;
    line-height: $button_size;
    padding: 0 $button_size/1.5;
    height: $button_size;
    border: 1px solid $bgcolor;
    font-size:$px12;
    @include border-radius(15px);
    @include inline-block;
    
    &:active,
    &:hover,
    &:focus {
      $experimental-support-for-svg: true;
      background:darken($bgcolor, 5%);
    }
}
// 
// @TODO: Add docs to box-rgba!
//
@mixin box-rgba($color: unquote('0,0,0'), $amount: 0.6) {
    @include rgba-background(rgba(0,0,0,0.8));
    @include rgba-background-inline(rgba(0,0,0,0.8));
}
//
//  Sharpen an image if it has become blurry due to upscaling or downscaling
//  @see https://developer.mozilla.org/en/CSS/image-rendering
//
@mixin sharpen-image {
    image-rendering:-moz-crisp-edges;
    -ms-interpolation-mode:nearest-neighbor;  /* IE 7+ */
}

//
//  When photos are upscaled or downscaled, they often get blurry. Don't use
//  this on flat color images, they will still appear blurry.
//  @see https://developer.mozilla.org/en/CSS/image-rendering
//
@mixin high-quality-image {
    image-rendering:optimizeQuality;
    -ms-interpolation-mode:bicubic;  /* IE 7+ */
}

//
//  Optimizes the rendering on images so they
//  appear faster, but at a lower quality. Useful for <video>
//
@mixin low-quality-image {
    image-rendering:optimizeSpeed;
}