05-gems.scss

// GEMS

// With both of these libraries you get a bunch of helpers and mixins that make your development even easier.
// - Compass: http://compass-style.org/
// - Bourbon: http://thoughtbot.com/bourbon/


// EXAMPLE 1: LINEAR-GRADIENT
// =================================================
// Compass
@include background-image(linear-gradient(left top, white, #ddd));

// Bourbon
@include background(linear-gradient(red, green) left repeat);





// EXAMPLE 2: @FONT-FACE
// =================================================
// Compass
@mixin font-face($name, $font-files, $eot: false, $weight: false, $style: false) {
  $iefont: unquote("#{$eot}?#iefix");
  @font-face {
    font-family: quote($name);
    @if $eot {
      src: font-url($eot);
      $font-files: font-url($iefont) unquote("format('eot')"), $font-files; }
    src: $font-files;
    @if $weight {
      font-weight: $weight; }
    @if $style {
      font-style: $style; } } }

// Bourbon
@mixin font-face($font-family, $file-path, $weight: normal, $style: normal ) {
  @font-face {
      font-family: $font-family;
      src: url('#{$file-path}.eot');
      src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
           url('#{$file-path}.woff') format('woff'),
           url('#{$file-path}.ttf') format('truetype'),
           url('#{$file-path}.svg##{$font-family}') format('svg');
      font-weight: $weight;
      font-style: $style;
  }
}