Skip to content
Browse files

Make prefixer and keyframes mixins more concise

  • Loading branch information...
1 parent 7ca9486 commit fc389ff2fea6eee27f8e80301db163292d55f51d Phil LaPier committed Feb 1, 2013
Showing with 65 additions and 64 deletions.
  1. +23 −33 app/assets/stylesheets/addons/_prefixer.scss
  2. +42 −31 app/assets/stylesheets/css3/_keyframes.scss
View
56 app/assets/stylesheets/addons/_prefixer.scss
@@ -1,50 +1,40 @@
-$prefixer-enabled-for-mozilla: true;
-$prefixer-enabled-for-webkit: true;
-$prefixer-enabled-for-opera: true;
-$prefixer-enabled-for-microsoft: true;
-$prefixer-enabled-for-spec: true;
-
//************************************************************************//
// Example: @include prefixer(border-radius, $radii, webkit ms spec);
//************************************************************************//
-@mixin prefixer ($property, $value, $prefixes) {
@TeffenEllis
TeffenEllis added a note Feb 23, 2013

The prefixer seems to be the cause of issue: #186

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+$prefix-for-webkit: true !default;
+$prefix-for-mozilla: true !default;
+$prefix-for-microsoft: true !default;
+$prefix-for-opera: true !default;
+$prefix-for-spec: true !default; // required for keyframe mixin
+@mixin prefixer ($property, $value, $prefixes) {
@each $prefix in $prefixes {
- @if $prefix == webkit {
- @if $prefixer-enabled-for-webkit {
- -webkit-#{$property}: $value;
- }
+
+ @if $prefix == webkit and $prefix-for-webkit == true {
+ -webkit-#{$property}: $value;
}
- @else if $prefix == moz {
- @if $prefixer-enabled-for-mozilla {
- -moz-#{$property}: $value;
- }
+ @else if $prefix == moz and $prefix-for-mozilla == true {
+ -moz-#{$property}: $value;
}
- @else if $prefix == ms {
- @if $prefixer-enabled-for-microsoft {
- -ms-#{$property}: $value;
- }
+ @else if $prefix == ms and $prefix-for-microsoft == true {
+ -ms-#{$property}: $value;
}
- @else if $prefix == o {
- @if $prefixer-enabled-for-opera {
- -o-#{$property}: $value;
- }
+ @else if $prefix == o and $prefix-for-opera == true {
+ -o-#{$property}: $value;
}
- @else if $prefix == spec {
- @if $prefixer-enabled-for-spec {
- #{$property}: $value;
- }
+ @else if $prefix == spec and $prefix-for-spec == true {
+ #{$property}: $value;
}
@else {
@warn "Unrecognized prefix: #{$prefix}";
}
}
}
-@mixin prefixer-disable-all() {
- $prefixer-enabled-for-mozilla: false;
- $prefixer-enabled-for-webkit: false;
- $prefixer-enabled-for-opera: false;
- $prefixer-enabled-for-microsoft: false;
- $prefixer-enabled-for-spec: false;
+@mixin disable-prefix-for-all() {
+ $prefix-for-webkit: false;
+ $prefix-for-mozilla: false;
+ $prefix-for-microsoft: false;
+ $prefix-for-opera: false;
+ $prefix-for-spec: false;
}
View
73 app/assets/stylesheets/css3/_keyframes.scss
@@ -1,40 +1,51 @@
// Adds keyframes blocks for supported prefixes, removing redundant prefixes in the block's content
@mixin keyframes($name) {
- $original-prefixer-enabled-for-mozilla: $prefixer-enabled-for-mozilla;
- $original-prefixer-enabled-for-webkit: $prefixer-enabled-for-webkit;
- $original-prefixer-enabled-for-opera: $prefixer-enabled-for-opera;
- $original-prefixer-enabled-for-microsoft: $prefixer-enabled-for-microsoft;
- $original-prefixer-enabled-for-spec: $prefixer-enabled-for-spec;
-
- @if $original-prefixer-enabled-for-mozilla {
- @include prefixer-disable-all();
- $prefixer-enabled-for-mozilla: true;
- @-moz-keyframes #{$name} { @content; }
+ $original-prefix-for-webkit: $prefix-for-webkit;
+ $original-prefix-for-mozilla: $prefix-for-mozilla;
+ $original-prefix-for-microsoft: $prefix-for-microsoft;
+ $original-prefix-for-opera: $prefix-for-opera;
+ $original-prefix-for-spec: $prefix-for-spec;
+
+ @if $original-prefix-for-webkit {
+ @include disable-prefix-for-all();
+ $prefix-for-webkit: true;
+ @-webkit-keyframes #{$name} {
+ @content;
+ }
}
- @if $original-prefixer-enabled-for-webkit {
- @include prefixer-disable-all();
- $prefixer-enabled-for-webkit: true;
- @-webkit-keyframes #{$name} { @content; }
+ @if $original-prefix-for-mozilla {
+ @include disable-prefix-for-all();
+ $prefix-for-mozilla: true;
+ @-moz-keyframes #{$name} {
+ @content;
+ }
}
- @if $original-prefixer-enabled-for-opera {
- @include prefixer-disable-all();
- $prefixer-enabled-for-opera: true;
- @-o-keyframes #{$name} { @content; }
+ @if $original-prefix-for-microsoft {
+ @include disable-prefix-for-all();
+ $prefix-for-microsoft: true;
+ @-ms-keyframes #{$name} {
+ @content;
+ }
}
- @if $original-prefixer-enabled-for-microsoft {
- @include prefixer-disable-all();
- $prefixer-enabled-for-microsoft: true;
- @-ms-keyframes #{$name} { @content; }
+ @if $original-prefix-for-opera {
+ @include disable-prefix-for-all();
+ $prefix-for-opera: true;
+ @-o-keyframes #{$name} {
+ @content;
+ }
}
- @if $original-prefixer-enabled-for-spec {
- @include prefixer-disable-all();
- $prefixer-enabled-for-spec: true;
- @keyframes #{$name} { @content; }
+ @if $original-prefix-for-spec {
+ $prefix-for-spec: true !default;
+ @include disable-prefix-for-all();
+ $prefix-for-spec: true;
+ @keyframes #{$name} {
+ @content;
+ }
}
- $prefixer-enabled-for-mozilla: $original-prefixer-enabled-for-mozilla;
- $prefixer-enabled-for-webkit: $original-prefixer-enabled-for-webkit;
- $prefixer-enabled-for-opera: $original-prefixer-enabled-for-opera;
- $prefixer-enabled-for-microsoft: $original-prefixer-enabled-for-microsoft;
- $prefixer-enabled-for-spec: $original-prefixer-enabled-for-spec;
+ $prefix-for-webkit: $original-prefix-for-webkit;
+ $prefix-for-mozilla: $original-prefix-for-mozilla;
+ $prefix-for-microsoft: $original-prefix-for-microsoft;
+ $prefix-for-opera: $original-prefix-for-opera;
+ $prefix-for-spec: $original-prefix-for-spec;
}

2 comments on commit fc389ff

@evanblack

Changing the nested 'if' structure in _prefixer.scss to use the 'AND' operator instead causes many "WARNING: Unrecognized prefix:" error messages because of the looping. For example, transforms within keyframes. Output is still correct, just annoying getting all of the warnings.

@plapier

hm, thanks for letting me know. I didn't notice the errors. I'll have to look into this later this week.

Please sign in to comment.
Something went wrong with that request. Please try again.