index.scss 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. $pxNames: '0' ,'px' ,'0-5' ,'1' ,'1-5' ,'2' ,'2-5' ,'3' ,'3-5' ,'4' ,'5' ,'6' ,'7' ,'8' ,'9' ,'10' ,'11' ,'12' ,'14' ,'16' ,'20' ,'24' ,'28' ,'32' ,'36' ,'40' ,'44' ,'48' ,'52' ,'56' ,'60' ,'64' ,'72' ,'80' ,'96';
  2. $pctNames: '1_2' ,'1_3' ,'2_3' ,'1_4' ,'2_4' ,'3_4' ,'1_5' ,'2_5' ,'3_5' ,'4_5' ,'1_6' ,'2_6' ,'3_6' ,'4_6' ,'5_6' ,'1_12' ,'2_12' ,'3_12' ,'4_12' ,'5_12' ,'6_12' ,'7_12' ,'8_12' ,'9_12' ,'10_12' ,'11_12';
  3. @mixin setPxs($pxs) {
  4. @each $name in $pxs{
  5. $varName: --rpx-#{$name};
  6. @include render($name, $varName);
  7. }
  8. }
  9. @mixin setPcts($pxs) {
  10. @each $name in $pxs{
  11. $varName: --percent-#{$name};
  12. @include render($name, $varName);
  13. }
  14. }
  15. // Scale
  16. $scales: 0, 50, 75, 90, 95, 100, 105, 110, 125, 150;
  17. @each $i in $scales {
  18. .scale-#{$i} {transform: scale(calc(#{$i} / 100));}
  19. .scale-x-#{$i} {transform: scaleX(calc(#{$i} / 100));}
  20. .scale-y-#{$i} {transform: scaleY(calc(#{$i} / 100));}
  21. }
  22. // Rotate
  23. $rotates: 0, 1, 2, 3, 6, 12, 45, 90, 180;
  24. @each $deg in $rotates {
  25. .rotate-#{$deg} {transform: rotate(#{$deg}deg);}
  26. .-rotate-#{$deg} {transform: rotate(#{-$deg}deg);}
  27. }
  28. // Translate
  29. @mixin render($name, $varName) {
  30. .translate-x-#{$name} { transform: translateX(var($varName)); }
  31. .translate-y-#{$name} { transform: translateY(var($varName)); }
  32. }
  33. @include setPxs($pxNames);
  34. @include setPcts($pctNames);
  35. // Skew
  36. $skews: 0, 1, 2, 3, 6, 12;
  37. @each $deg in $skews {
  38. .skew-x-#{$deg} {transform: skewX(#{$deg}deg);}
  39. .skew-y-#{$deg} {transform: skewY(#{$deg}deg);}
  40. }
  41. // Transform Origin
  42. $transformOrigins: center center, top top, top-right 'top right', right right, bottom-right 'bottom right', bottom bottom, bottom-left 'bottom left', left left, top-left 'top left' ;
  43. @each $name, $val in $transformOrigins {
  44. .origin-#{$name} {transform-origin: #{$val};}
  45. }