/* VERSION 1 ***********************************************/
/*
* Add prefix for property css
*
* @param $name : name of property
* @param $value : value of property
*
* @example
* - Usage:
* .foo {
*    @inlucde prefix(transform, translateY(-50%));
* }
*/
@mixin prefix($name, $value) {
  -webkit-#{$name}: $value;
  -moz-#{$name}: $value;
  -ms-#{$name}: $value;
  -o-#{$name}: $value;
  #{$name}: $value;
}

/* VERSION 2 : Avanced version ****************************************/
/*
* Mixin to prefix several properties at once
*
* @param {List} $prefixes (()) - List of prefixes to print
* @example
* - Usage:
* .foo {
*   @include prefix((
*     column-count: 3,
*     column-gap: 1.5em,
*     column-rule: 2px solid hotpink
*   ), webkit moz);
* }
* - Output:
* .foo {
*   -webkit-column-count: 3;
*   -moz-column-count: 3;
*   column-count: 3;
*   -webkit-column-gap: 1.5em;
*   -moz-column-gap: 1.5em;
*   column-gap: 1.5em;
*   -webkit-column-rule: 2px solid hotpink;
*   -moz-column-rule: 2px solid hotpink;
*   column-rule: 2px solid hotpink;
*}
*/
@mixin prefixServeral($declarations, $prefixes: ()) {
  @each $property, $value in $declarations {
      @each $prefix in $prefixes {
          #{'-' + $prefix + '-' + $property}: $value;
      }

      // Output standard non-prefixed declaration
      #{$property}: $value;
  }
}