Skip to content

Instantly share code, notes, and snippets.

@bryanerayner

bryanerayner/SASS Prefix Mixin

Last active August 29, 2015 13:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bryanerayner/9200953 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bryanerayner/9200953 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. bryanerayner revised this gist May 7, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion SASS Prefix Mixin
    View file
    Original file line number Diff line number Diff line change
    @@ -20,7 +20,7 @@
    -ms-animation: slide 1s;
    animation: slide 1s;
    */
    @mixin prefix($property, $value, $prefixes:(-webkit-,-moz-,-o-,''))
    @mixin prefix($property, $value, $prefixes:(-webkit-,-moz-,-o-,-ms-''))
    {
    @each $prefix in $prefixes
    {
  2. bryanerayner revised this gist Feb 25, 2014. 1 changed file with 14 additions and 14 deletions.
    28 changes: 14 additions & 14 deletions SASS Prefix Mixin
    View file
    Original file line number Diff line number Diff line change
    @@ -1,24 +1,24 @@
    /**
    Prefix - Prefixes a property with webkit, moz, or o.
    Prefix - Prefixes a property with webkit, moz, or o.

    Usage:
    Usage:

    @include prefix(animation, slide 1s)
    @include prefix(animation, slide 1s)

    outputs
    -webkit-animation: slide 1s;
    -moz-animation: slide 1s;
    -o-animation: slide 1s;
    animation: slide 1s;
    Outputs:
    -webkit-animation: slide 1s;
    -moz-animation: slide 1s;
    -o-animation: slide 1s;
    animation: slide 1s;

    Want to forget opera or use a different set of prefixes?
    Want to forget Opera or use a different set of prefixes?

    @include prefix(animation, slide 1s, (-webkit-,-ms-))
    outputs
    -webkit-animation: slide 1s;
    -ms-animation: slide 1s;
    animation: slide 1s;
    @include prefix(animation, slide 1s, (-webkit-,-ms-))

    Outputs:
    -webkit-animation: slide 1s;
    -ms-animation: slide 1s;
    animation: slide 1s;
    */
    @mixin prefix($property, $value, $prefixes:(-webkit-,-moz-,-o-,''))
    {
  3. bryanerayner created this gist Feb 25, 2014.
    30 changes: 30 additions & 0 deletions SASS Prefix Mixin
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,30 @@
    /**
    Prefix - Prefixes a property with webkit, moz, or o.

    Usage:

    @include prefix(animation, slide 1s)

    outputs
    -webkit-animation: slide 1s;
    -moz-animation: slide 1s;
    -o-animation: slide 1s;
    animation: slide 1s;

    Want to forget opera or use a different set of prefixes?

    @include prefix(animation, slide 1s, (-webkit-,-ms-))
    outputs
    -webkit-animation: slide 1s;
    -ms-animation: slide 1s;
    animation: slide 1s;

    */
    @mixin prefix($property, $value, $prefixes:(-webkit-,-moz-,-o-,''))
    {
    @each $prefix in $prefixes
    {
    #{$prefix}#{$property}: #{$value};
    }
    #{$property}: #{$value};
    }