helpers.scss 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. // Exponent
  2. // From: https://github.com/Team-Sass/Sassy-math/blob/master/sass/math.scss#L36
  3. @function exponent($base, $exponent) {
  4. // reset value
  5. $value: $base;
  6. // positive intergers get multiplied
  7. @if $exponent > 1 {
  8. @for $i from 2 through $exponent {
  9. $value: $value * $base; } }
  10. // negitive intergers get divided. A number divided by itself is 1
  11. @if $exponent < 1 {
  12. @for $i from 0 through -$exponent {
  13. $value: $value / $base; } }
  14. // return the last value written
  15. @return $value;
  16. }
  17. @function pow($base, $exponent) {
  18. @return exponent($base, $exponent);
  19. }
  20. // Transition mixins
  21. @mixin transition($args...) {
  22. -webkit-transition: $args;
  23. -moz-transition: $args;
  24. transition: $args;
  25. }
  26. @mixin transition-property($args...) {
  27. -webkit-transition-property: $args;
  28. -moz-transition-property: $args;
  29. transition-property: $args;
  30. }
  31. @mixin animation($args...) {
  32. -webkit-animation: $args;
  33. -moz-animation: $args;
  34. animation: $args;
  35. }
  36. @mixin animation-fill-mode($args...) {
  37. -webkit-animation-fill-mode: $args;
  38. -moz-animation-fill-mode: $args;
  39. animation-fill-mode: $args;
  40. }
  41. @mixin transform($args...) {
  42. -webkit-transform: $args;
  43. -moz-transform: $args;
  44. transform: $args;
  45. }
  46. // Keyframe animations
  47. @mixin keyframes($animation-name) {
  48. @-webkit-keyframes $animation-name {
  49. @content;
  50. }
  51. @-moz-keyframes $animation-name {
  52. @content;
  53. }
  54. @keyframes $animation-name {
  55. @content;
  56. }
  57. }
  58. // Media queries
  59. @mixin smaller($width) {
  60. @media screen and (max-width: $width) {
  61. @content;
  62. }
  63. }
  64. // Clearfix
  65. @mixin clearfix {
  66. &:after {
  67. content: "";
  68. display: block;
  69. clear: both;
  70. }
  71. }