@mixin pe-animation($animations...) {
  ...
}
@mixin pe-animation-name($names...) {
  ...
}
@mixin pe-animation-duration($times...) {
  ...
}
@mixin pe-animation-timing-function($motions...) {
  ...
}
@mixin pe-animation-iteration-count($values...) {
  ...
}
@mixin pe-animation-direction($directions...) {
  ...
}
@mixin pe-animation-play-state($states...) {
  ...
}
@mixin pe-animation-delay($times...) {
  ...
}
@mixin pe-animation-fill-mode($modes...) {
  ...
}

.class-name {
  @include pe-animation(all 2.0s ease);
}

.class-name {
  -webkit-animation: all 2s ease;
  -moz-animation: all 2s ease;
  animation: all 2s ease;
}

@mixin pe-appearance($value: none) {
  ...
}

.class-name {
  @include pe-appearance(none);
}

.class-name {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
}

• background-image に複数の背景を適用して返す。
• linear-gradient radial-gradient の複数指定を想定（gradient 以外でこの @mixin を使用する利点がない）。
• 複数指定を想定しているため、フォールバックとして background-color は返さない。
• 注意点（β版故の）
  • ～ iOS 4.2 & ～ Android 3.0 に対応させたい場合は -webkit-gradient() を別途併記する。
  • 絶賛検証中。

@mixin pe-background-image($images...) {
  ...
}

.class-name {
  @include pe-background-image(
    url("/images/logo.png"),
    linear-gradient(to bottom, #ffffff 90%, #faf8f5 100%),
    linear-gradient(160deg, #999ca8 0, #999ca8 60%, #6b6f7d 62%, #6b6f7d 100%)
  );
}

.class-name {
  background-image:
    url("/images/logo.png"),
    -webkit-linear-gradient(top, #ffffff 90%, #faf8f5 100%),
    -webkit-linear-gradient(-430deg, #999ca8 0, #999ca8 60%, #6b6f7d 62%, #6b6f7d 100%);
  background-image:
    url("/images/logo.png"),
    linear-gradient(to bottom, #ffffff 90%, #faf8f5 100%),
    linear-gradient(160deg, #999ca8 0, #999ca8 60%, #6b6f7d 62%, #6b6f7d 100%);
}

@mixin pe-background-size($size) {
  ...
}

.class-name {
  @include pe-background-size(200px 50px);
}

.class-name {
  -webkit-background-size: 200px 50px;
  background-size: 200px 50px;
}

@mixin pe-box-shadow($shadow...) {
  ...
}

.class-name {
  @include pe-box-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
}

.class-name {
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}

@mixin pe-box-sizing($box) {
  ...
}

.class-name {
  @include pe-box-sizing(border-box);
}

.class-name {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@mixin pe-calc($property, $value) {
  ...
}

.class-name {
  @include pe-calc(width, "25% - 1em");
}

.class-name {
  width: -webkit-calc(25% - 1em);
  width: -moz-calc(25% - 1em);
  width: calc(25% - 1em);
}

@mixin pe-columns($arg: auto) {
  ...
}
@mixin pe-column-count($int: auto) {
  ...
}
@mixin pe-column-gap($length: normal) {
  ...
}
@mixin pe-column-fill($arg: auto) {
  ...
}
@mixin pe-column-rule($arg) {
  ...
}
@mixin pe-column-rule-color($color) {
  ...
}
@mixin pe-column-rule-style($style: none) {
  ...
}
@mixin pe-column-rule-width ($width: none) {
  ...
}
@mixin pe-column-span($arg: none) {
  ...
}
@mixin pe-column-width($length: auto) {
  ...
}

.class-name {
  @include pe-columns(250px auto);
}

.class-name {
  -webkit-columns: 250px auto;
  -moz-columns: 250px auto;
  columns: 250px auto;
}

@mixin pe-filter($function: none) {
  ...
}

.class-name {
  @include pe-filter(blur(5px));
}

.class-name {
  -webkit-filter: blur(5px);
  filter: blur(5px);
}

@mixin pe-keyframes($name) {
  ...
}

@include pe-keyframes(loading) {
  0% {
    top: 0;
  }
  50% {
    top: 50px;
  }
  100% {
    top: 0;
  }
}

@-webkit-keyframes loading {
  0% {
    top: 0;
  }
  50% {
    top: 50px;
  }
  100% {
    top: 0;
  }
}
@-moz-keyframes loading {
  0% {
    top: 0;
  }
  50% {
    top: 50px;
  }
  100% {
    top: 0;
  }
}
@keyframes loading {
  0% {
    top: 0;
  }
  50% {
    top: 50px;
  }
  100% {
    top: 0;
  }
}

• background-image の linear-gradient を返す。
• 未対応ブラウザのフォールバックとして background-color も返す。
• フォールバックの background-color は開始色が使用される。
• フォールバックの background-color を指定したい場合は、最終引数に $fallback: で指定する。
• 注意点（β版故の）
  • ～ iOS 4.2 & ～ Android 3.0 に対応させたい場合は -webkit-gradient() を別途併記する。
  • 指定可能な色数は最大 10 個（もしそれ以上必要なら改修するが、これ以上多くなることは無いと想定）。

@mixin pe-linear-gradient() {
  ...
}

.class-name {
  @include pe-linear-gradient(to bottom, #ffffff, #faf8f5);
}

.class-name {
  background-color: #ffffff;
  background-image: -webkit-linear-gradient(top, #ffffff, #faf8f5);
  background-image: linear-gradient(to bottom, #ffffff, #faf8f5);
}

その他の使用例。

.class-name {
  // 色の位置を指定
  @include pe-linear-gradient(to bottom, #ffffff 90%, #faf8f5 100%);

  // フォールバック色を指定
  @include pe-linear-gradient(to bottom, #ffffff 90%, #faf8f5 100%, $fallback: #faf8f5);

  // 角度を指定
  @include pe-linear-gradient(160deg, #999ca8 0, #999ca8 60%, #6b6f7d 62%, #6b6f7d 100%);
}

.class-name {
  background-color: #ffffff;
  background-image: -webkit-linear-gradient(top, #ffffff 90%, #faf8f5 100%);
  background-image: linear-gradient(to bottom, #ffffff 90%, #faf8f5 100%);

  background-color: #faf8f5;
  background-image: -webkit-linear-gradient(top, #ffffff 90%, #faf8f5 100%);
  background-image: linear-gradient(to bottom, #ffffff 90%, #faf8f5 100%);

  background-color: #999ca8;
  background-image: -webkit-linear-gradient(-430deg, #999ca8 0, #999ca8 60%, #6b6f7d 62%, #6b6f7d 100%);
  background-image: linear-gradient(160deg, #999ca8 0, #999ca8 60%, #6b6f7d 62%, #6b6f7d 100%);
}

• 高解像度のディスプレイ（HiDPI）をフィルタリングするメディアクエリを返す。
• 各種デバイスの画素密度（resolution）の参考元：http://bjango.com/articles/min-device-pixel-ratio/

@mixin pe-media-query-hidpi($ratio: 1.3) {
  ...
}

.class-name {
  font-weight: bold;
  @include pe-media-query-hidpi {
    font-weight: normal;
  }
}

.class-name {
  font-weight: bold;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
 only screen and (min--moz-device-pixel-ratio: 1.3),
 only screen and (-o-min-device-pixel-ratio: 1.3 / 1),
 only screen and (min-device-pixel-ratio: 1.3),
 only screen and (min-resolution: 125dpi),
 only screen and (min-resolution: 1.3dppx) {
  .class-name {
    font-weight: normal;
  }
}

@mixin pe-placeholder {
  ...
}

.class-name {
  @include pe-placeholder {
    color: #d0d0d0;
  }
}

.class-name::-webkit-input-placeholder {
  color: #d0d0d0;
}
.class-name::-moz-placeholder {
  color: #d0d0d0;
}
.class-name:-moz-placeholder {
  color: #d0d0d0;
}
.class-name:-ms-input-placeholder {
  color: #d0d0d0;
}

• background-image の radial-gradient を返す。
• 未対応ブラウザのフォールバックとして background-color も返す。
• フォールバックの background-color は開始色が使用される。
• フォールバックの background-color を指定したい場合は、最終引数に $fallback: で指定する。
• 注意点（β版故の）
  • ～ iOS 4.2 & ～ Android 3.0 に対応させたい場合は -webkit-gradient() を別途併記する。
  • 指定可能な色数は最大 10 個（もしそれ以上必要なら改修するが、これ以上多くなることは無いと想定）。
  • 絶賛検証中。

@mixin pe-radial-gradient() {
  ...
}

.class-name {
  @include pe-radial-gradient(to bottom, #ffffff, #faf8f5);
}

.class-name {
  background-color: #ffffff;
  background-image: -webkit-radial-gradient(#ffffff, #faf8f5);
  background-image: radial-gradient(  #ffffff, #faf8f5);
}

@mixin pe-transform($property: none) {
  ...
}
@mixin pe-transform-origin($axes: 50%) {
  ...
}
@mixin pe-transform-style($style: flat) {
  ...
}

.class-name {
  @include pe-transform(translate(100px) rotate(10deg));
}

.class-name {
  -webkit-transform: translate(100px) rotate(10deg);
  -moz-transform: translate(100px) rotate(10deg);
  -ms-transform: translate(100px) rotate(10deg);
  -o-transform: translate(100px) rotate(10deg);
  transform: translate(100px) rotate(10deg);
}

@mixin pe-transition($properties...) {
  ...
}
@mixin transition-property($properties...) {
  ...
}
@mixin transition-duration($times...) {
  ...
}
@mixin transition-timing-function($motions...) {
  ...
}
@mixin transition-delay($times...) {
  ...
}

.class-name {
  @include pe-transition(all 2.0s ease);
}

.class-name {
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  transition: all 2s ease;
}

@mixin pe-user-select($value: none) {
  ...
}

.class-name {
  @include pe-user-select;
}

.class-name {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}