Margin.scss 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. // Margin
  2. $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';
  3. $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';
  4. @mixin setPxs($pxs) {
  5. @each $name in $pxs{
  6. $varName: --rpx-#{$name};
  7. @include render($name, $varName);
  8. }
  9. }
  10. @mixin setPcts($pxs) {
  11. @each $name in $pxs{
  12. $varName: --percent-#{$name};
  13. @include render($name, $varName);
  14. }
  15. }
  16. @mixin render($name, $varName) {
  17. .m-#{$name} { margin: var($varName); }
  18. .mx-#{$name} {margin-left: var($varName); margin-right: var($varName);}
  19. .my-#{$name} {margin-top: var($varName); margin-bottom: var($varName);}
  20. @each $short, $long in t top, r right, b bottom, l left {
  21. .m#{$short}-#{$name} {
  22. margin-#{$long}: var($varName);
  23. }
  24. .-m#{$short}-#{$name} {
  25. margin-#{$long}: calc(var($varName) * -1);
  26. }
  27. }
  28. }
  29. @mixin _render($name, $val) {
  30. .m-#{$name} { margin: $val; }
  31. .mx-#{$name} {margin-left: $val; margin-right: $val;}
  32. .my-#{$name} {margin-top: $val; margin-bottom: $val;}
  33. @each $short, $long in t top, r right, b bottom, l left {
  34. .m#{$short}-#{$name} {
  35. margin-#{$long}: $val;
  36. }
  37. }
  38. }
  39. @include _render('auto', auto);
  40. @include setPxs($pxNames);