A collection of LESS mixins.

mixins.less

//
// LESS Utility Mixins
// -------------------

// Fill the parent element
.fill(@spacing: 0) {
  position: absolute;
  top: @spacing; bottom: @spacing;
  left: @spacing; right: @spacing;
}

// Set all active states at once
.active(@rules) {
  &:hover,
  &:focus,
  &:active,
  &.active {
    @rules();
  }
}

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

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

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

// Aspect ratio
// (Apply to container)
// http://www.mademyday.de/css-height-equals-width-with-pure-css.html
.aspect-ratio(@w, @h) {
  @ratio: (@h / @w);

  &:before {
    content: "";
    display: block;
    padding-top: (100% * @ratio);
  }

  > * {
    .fill;
  }
}

// Toggle font smoothing mode in Webkit & FF
.font-smoothing() {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.font-smoothing(reset) {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

// Disable default form input appearance in Webkit & FF
.appearance(@appearance: none) {
  -webkit-appearance: @appearance;
  -moz-appearance: @appearance;
  appearance: @appearance;
}

// Combo width/height media queries
.screen-min(@size, @rules) {
  @media (min-width: @size), (min-height: @size) {
    @rules();
  }
}
.screen-max(@size, @rules) {
  @media (max-width: @size), (max-height: @size) {
    @rules();
  }
}