A collection of SASS mixins.

_mixins.scss

// SASS Mixins
// -----------

// Force an element to fill its container
@mixin fill {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
}

// Aspect ratio (apply to wrapper)
// http://www.mademyday.de/css-height-equals-width-with-pure-css.html
@mixin aspect-ratio($w, $h) {
  position: relative;

  &:before {
    content: "";
    display: block;
    padding-top: (100% * $h / $w);
  }

  > * {
    @include fill;
  }
}

// Square aspect ratio shorthand
@mixin aspect-sq {
  @include aspect-ratio(1, 1);
}

// Justify for responsive layout
// http://www.barrelny.com/blog/text-align-justify-and-rwd/
@mixin justify {
  text-align: justify;

  > * {
    display: inline-block;
    vertical-align: top;
    text-align: left;
  }

  &:after{
    content: '';
    display: inline-block;
    width: 100%;
  }
}

// Combined media queries for width *or* height
@mixin min($w, $h: $w) {
  @media (min-width: $w), (min-height: $h) {
    @content;
  }
}
@mixin max($w, $h: $w) {
  @media (max-width: $w), (max-height: $h) {
    @content;
  }
}