These are some really simple mixins to write clean and DRY animations and leave the annoying vendor specific prefixing to the mixin.

A mixin for vendor prefixing the animation declaration

.complicated-element {
  @include animation(animation-name 2s infinite linear);
}

A mixin for vendor prefixing the animation-delay declaration

.complicated-element {
  @include animation-delay(2s);
}

A mixin for vendor prefixing the @keyframes declaration

@include keyframes(animation-name) {
  // Your animation here
}

A mixin for vendor prefixing transitions

.complicated-element {
  @include transition(transform 0.2s ease-in-out);
}

Center the content in this element. Both vertically and horizontally.

.complicated-element {
  @include center;
}

Set the default styling for font family and size.

p {
  @include font;
}

A mixin that resets margin, padding and box-sizing to reliable defaults on the given element (and optionally all its children).

.complicated-element {
  @include reset;
}

We'll probably want to revisit this some time soon, but for now it will get us going.

Mixin to specify styling that is only applicable to devices that have a mouse pointer with a minimum screen width of 768 pixels.

@include on-large-computer {
  // Styling to apply
}

Mixin to specify styling that is only applicable to devices that have a minimum screen width of 768 pixels.

@include on-large-screen {
  // Styling to apply
}

Mixin to specify styling that is only applicable to touchscreen devices with a minimum screen width of 768 pixels.

@include on-large-touchscreen {
  // Styling to apply
}

Mixin to specify styling that is only applicable to devices that have a mouse pointer with a maximum screen width of 768 pixels.

@include on-small-computer {
  // Styling to apply
}

Mixin to specify styling that is only applicable to devices that have a maximum screen width of 768 pixels.

@include on-small-screen {
  // Styling to apply
}

Mixin to specify styling that is only applicable to touchscreen devices with a maximum screen width of 768 pixels.

@include on-small-touchscreen {
  // Styling to apply
}