README.md

Sass time savers

https://news.layervault.com/stories/28802-ask-dn-what-are-your-little-sassless-time-savers

https://gist.github.com/HugoGiraudel/1a0a43f1511b9bd75adf

_aspect-ratio.sass

// Mixin to ensure aspect ratio for images for example
//
// Usage for 16:9 ratio:
//     @include aspect-ratio(9/16)
//
// See http://sassmeister.com/gist/matiassingers/8c0fe5b3374d5a1ce5ce

@mixin aspect-ratio($result)
  position: relative

  &:before
    content: ''
    display: block
    padding-bottom: percentage($result)

  > *
    position: absolute
    top: 0
    left: 0
    bottom: 0
    right: 0

_fonts.scss

// https://gist.github.com/sumul/2fbe259357888e8d677a

// Weights
$hairline-weight: 100;
$thin-weight:     200;
$light-weight:    300;
$normal-weight:   400;
$medium-weight:   500;
$semibold-weight: 600;
$bold-weight:     700;
$xbold-weight:    800;
$black-weight:    900;
 
// Synonyms
$regular-weight:    $normal-weight;
$book-weight:       $light-weight;
$xlight-weight:     $hairline-weight;
$ultralight-weight: $hairline-weight;
$heavy-weight:      $xbold-weight;
 
// Include fonts
// Order matters: normal, bold, italic, bold+italic
 
@font-face {
  font-family: "MyFont";
  font-weight: $normal-weight;
  font-style: normal;
  src: url("#{$fonts-path}/MyFont-Regular.eot");
  // and the rest of the src urls...
}
 
@font-face {
  font-family: "MyFont";
  font-weight: $medium-weight;
  font-style: normal;
  src: url("#{$fonts-path}/MyFont-Medium.eot");
  // and the rest of the src urls...
}
 
@font-face {
  font-family: "MyFont";
  font-weight: $bold-weight;
  font-style: normal;
  src: url("#{$fonts-path}/MyFont-Bold.eot");
  // and the rest of the src urls...
}
 
 
@font-face {
  font-family: "MyFont";
  font-weight: $normal-weight;
  font-style: italic;
  src: url("#{$fonts-path}/MyFont-Italic.eot");
  // and the rest of the src urls...
}
 
@font-face {
  font-family: "MyFont";
  font-weight: $medium-weight;
  font-style: italic;
  src: url("#{$fonts-path}/MyFont-Medium-Italic.eot");
  // and the rest of the src urls...
}
 
@font-face {
  font-family: "MyFont";
  font-weight: $bold-weight;
  font-style: italic;
  src: url("#{$fonts-path}/MyFont-Bold-Italic.eot");
  // and the rest of the src urls...
}
 
// Use 'em
 
body {
  font-family: "MyFont", sans-serif;
}
 
p {
  font-weight: $normal-weight;
}
 
em {
  font-style: italic;
}
 
strong {
  font-weight: $bold-weight;
}

_retina.sass

// https://gist.github.com/jeff-shin/0c7b1ce9b76ad4d8fcc3

// In your mixin file
=retina
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx), (min-resolution: 192dpi)
    @content
    
// Call this mixin
.something
  +retina
    something: something

_z-index.scss

// http://jonsuh.com/blog/organizing-z-index-with-sass/

$z-index: (
  modal              : 200,
  navigation         : 100,
  footer             : 90,
  triangle           : 60,
  navigation-rainbow : 50,
  share-type         : 41,
  share              : 40,
);

@function z-index($key) {
  @return map-get($z-index, $key);
}

@mixin z-index($key) {
  z-index: z-index($key);
}

.modal {
  @include z-index(modal);
}