_background.scss 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. //************************************************************************//
  2. // Background property for adding multiple backgrounds using shorthand
  3. // notation.
  4. //************************************************************************//
  5. @mixin background($backgrounds...) {
  6. $webkit-backgrounds: ();
  7. $spec-backgrounds: ();
  8. @each $background in $backgrounds {
  9. $webkit-background: ();
  10. $spec-background: ();
  11. $background-type: type-of($background);
  12. @if $background-type == string or list {
  13. $background-str: if($background-type == list, nth($background, 1), $background);
  14. $url-str: str-slice($background-str, 0, 3);
  15. $gradient-type: str-slice($background-str, 0, 6);
  16. @if $url-str == "url" {
  17. $webkit-background: $background;
  18. $spec-background: $background;
  19. }
  20. @else if $gradient-type == "linear" {
  21. $gradients: _linear-gradient-parser("#{$background}");
  22. $webkit-background: map-get($gradients, webkit-image);
  23. $spec-background: map-get($gradients, spec-image);
  24. }
  25. @else if $gradient-type == "radial" {
  26. $gradients: _radial-gradient-parser("#{$background}");
  27. $webkit-background: map-get($gradients, webkit-image);
  28. $spec-background: map-get($gradients, spec-image);
  29. }
  30. @else {
  31. $webkit-background: $background;
  32. $spec-background: $background;
  33. }
  34. }
  35. @else {
  36. $webkit-background: $background;
  37. $spec-background: $background;
  38. }
  39. $webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma);
  40. $spec-backgrounds: append($spec-backgrounds, $spec-background, comma);
  41. }
  42. background: $webkit-backgrounds;
  43. background: $spec-backgrounds;
  44. }