_prefixer.scss 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. @charset "UTF-8";
  2. /// A mixin for generating vendor prefixes on non-standardized properties.
  3. ///
  4. /// @param {String} $property
  5. /// Property to prefix
  6. ///
  7. /// @param {*} $value
  8. /// Value to use
  9. ///
  10. /// @param {List} $prefixes
  11. /// Prefixes to define
  12. ///
  13. /// @example scss - Usage
  14. /// .element {
  15. /// @include prefixer(border-radius, 10px, webkit ms spec);
  16. /// }
  17. ///
  18. /// @example css - CSS Output
  19. /// .element {
  20. /// -webkit-border-radius: 10px;
  21. /// -moz-border-radius: 10px;
  22. /// border-radius: 10px;
  23. /// }
  24. ///
  25. /// @require {variable} $prefix-for-webkit
  26. /// @require {variable} $prefix-for-mozilla
  27. /// @require {variable} $prefix-for-microsoft
  28. /// @require {variable} $prefix-for-opera
  29. /// @require {variable} $prefix-for-spec
  30. @mixin prefixer($property, $value, $prefixes) {
  31. @each $prefix in $prefixes {
  32. @if $prefix == webkit {
  33. @if $prefix-for-webkit {
  34. -webkit-#{$property}: $value;
  35. }
  36. } @else if $prefix == moz {
  37. @if $prefix-for-mozilla {
  38. -moz-#{$property}: $value;
  39. }
  40. } @else if $prefix == ms {
  41. @if $prefix-for-microsoft {
  42. -ms-#{$property}: $value;
  43. }
  44. } @else if $prefix == o {
  45. @if $prefix-for-opera {
  46. -o-#{$property}: $value;
  47. }
  48. } @else if $prefix == spec {
  49. @if $prefix-for-spec {
  50. #{$property}: $value;
  51. }
  52. } @else {
  53. @warn "Unrecognized prefix: #{$prefix}";
  54. }
  55. }
  56. }
  57. @mixin disable-prefix-for-all() {
  58. $prefix-for-webkit: false !global;
  59. $prefix-for-mozilla: false !global;
  60. $prefix-for-microsoft: false !global;
  61. $prefix-for-opera: false !global;
  62. $prefix-for-spec: false !global;
  63. }