box:hover {
  @include animation-name(scale, slide);
  @include animation-duration(2s);
  @include animation-timing-function(ease);
  @include animation-iteration-count(infinite);

  // Animation shorthand works the same as the CSS3 animation shorthand
  @include animation(scale 1.0s ease-in, slide 2.0s ease);
}

@include appearance(none);

@include backface-visibility(visible);

@include background(linear-gradient(red, green) left repeat);
@include background(linear-gradient(red, green) left repeat, radial-gradient(red, orange) left repeat);
@include background(url("/images/a.png"), linear-gradient(red, green), center no-repeat orange scroll);

// Image asset with a linear-gradient
@include background-image(url("/images/a.png"), linear-gradient(white 0, yellow 50%, transparent 50%));

// Multiple linear-gradients - Demo
@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), 
                           linear-gradient(#4e7ba3, darken(#4e7ba4, 10%)));

// NOT SUPPORTED
@include background-image(url("/images/a.png") center no-repeat, url("images/b.png") left repeat);

// Background-image is not a shorthand property, therefore this doesn't make sense.

@include background-image(url("/images/a.png"), url("images/b.png"));
background-position: center top, center;
background-repeat: no-repeat, repeat-x;

@include background-size(50% 100%); // Single
@include background-size(50% 100%, 75% 100%); // Multiple

@include border-image(url(/images/border.png) 27 repeat);

@include border-top-radius(5px);
@include border-bottom-radius(5px);
@include border-left-radius(5px);
@include border-right-radius(5px);

@include box-shadow(0 0 5px 3px hsla(0, 0%, 0%, 0.65));

@include box-sizing(border-box);

@include columns(12 8em);
@include column-rule(1px solid green);

div.parent {
  @include display-box;
  @include box-align(start);
  @include box-orient(horizontal);
  @include box-pack(start);
}

div.parent > div.child {
  @include box-flex(2);
}

// Alternative custom shorthand mixin.
div.parent {
  @include box($orient: horizontal, $pack: center, $align: stretch); // defaults
  @include box(vertical, start, stretch);
}

@include font-face(SourceSansPro, '/fonts/Source_Sans_Pro/SourceSansPro-Regular');
@include font-face(SourceSansPro, '/fonts/Source_Sans_Pro/SourceSansPro-Bold', bold);
@include font-face(SourceSansPro, '/fonts/Source_Sans_Pro/SourceSansPro-Italic', normal, italic);

// Rails asset-pipeline - place fonts in app/assets/fonts/
@include font-face(SourceSansPro, 'Source_Sans_Pro/SourceSansPro-Regular', normal, $asset-pipeline: true);

@include hidpi(1.5) {
  width: 260px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 1.5/1),
only screen and (min-resolution: 144dpi),
only screen and (min-resolution: 1.5dppx) {
  width: 260px;
}

@include image-rendering(optimizeSpeed);

@include keyframes(fadeIn) {
  from {
    @include transform(scale(0));
  }
  to {
    @include transform(scale(1));
  }
}

@-webkit-keyframes fadeIn {
  from {
    -webkit-transform: scale(0); }

  to {
    -webkit-transform: scale(1); } }

@-moz-keyframes fadeIn {
  from {
    -moz-transform: scale(0); }

  to {
    -moz-transform: scale(1); } }

@-o-keyframes fadeIn {
  from {
    -o-transform: scale(0); }

  to {
    -o-transform: scale(1); } }

@keyframes fadeIn {
  from {
    transform: scale(0); }

  to {
    transform: scale(1); } }

@include linear-gradient(#1e5799, #2989d8);
@include linear-gradient(to top, #8fdce5, #3dc3d1);
@include linear-gradient(to top, #8fdce5, #3dc3d1, $fallback: red);
@include linear-gradient(50deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);

@include perspective(300px);
@include perspective-origin(30% 30%);

input {
  width: 300px;

  @include placeholder {
    color: red;
  }
}

input {
  width: 300px;
}

input::-webkit-input-placeholder {
  color: red;
}
input:-moz-placeholder {
  color: red;
}
input::-moz-placeholder {
  color: red;
}
input:-ms-input-placeholder {
  color: red;
}

@include radial-gradient(#1e5799, #3dc3d1);
@include radial-gradient(#1e5799, #3dc3d1, $fallback: red);
@include radial-gradient(circle at 50% 50%, #eee 10%, #1e5799 30%, #efefef);

@include transform(translateY(50px));

@include transform-origin(center top);

@include transform-style(preserve-3d);

@include transition (all 2.0s ease-in-out);
@include transition (opacity 1.0s ease-in 0s, width 2.0s ease-in 2s);

// Transition a vendor-prefixed property (transform)
@include transition (transition-property-names((transform, color, background), moz) 1.0s ease-in 0s);

@include user-select(none);