12345678910111213141516171819202122232425 |
- // Gap
- // $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';
- // $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';
- // @mixin setPxs($pxs) {
- // @each $name in $pxs{
- // $varName: --rpx-#{$name};
- // @include render($name, $varName);
- // }
- // }
- // @mixin setPcts($pxs) {
- // @each $name in $pxs{
- // $varName: --percent-#{$name};
- // @include render($name, $varName);
- // }
- // }
- @mixin render($name, $varName) {
- .gap-#{$name} {gap: var($varName);}
- .gap-x-#{$name} {column-gap: var($varName); }
- .gap-y-#{$name} {row-gap: var($varName);}
- }
- @include setPxs($pxNames);
|