@each $key, $value in (small:12,base:14){ .font-size-#{$key}{ font-size: #{$value}px; }}@each $key, $value in (base:32,big:48,small:28,mini:18){ .font-titsize-#{$key}{ font-size: #{$value}px; }}@for $i from 12 through 48 { .line-hei-#{$i}{ line-height: $i px; }}@each $key,$value in (l:left,r: right, cent:center,just:justify,inhe:inherit){ .text-ali-#{$key}{ text-align: #{$value}; }}@each $key,$value in (none:none,bloc: block, inli:inline,inbl:inline-block){ .dis-#{$key}{ display:#{$value}; }}@for $i from 1 through 100{ //宽度小于内容1/3 .wid-#{$i}{ width: 8px*$i; } .wid-vw-#{$i}{ width: 1vw*$i; } .wid-per-#{$i}{ width: 1%*$i; }}@for $i from 1 through 100{ .hei-#{$i}{ height: 8px*$i; } .hei-vh-#{$i}{ height: 1vh*$i; } .hei-per-#{$i}{ height: 1%*$i; }}.flex{ display: flex;}@each $key,$value in (star:flex-start,end: flex-end,cent:center, betw:space-between,arou:space-around) { .just-cont-#{$key}{ justify-content:#{$value}; }}@each $key,$value in (star:flex-start,end: flex-end,cent:center, base:baseline,stre:stretch) { .alig-item-#{$key}{ align-items:#{$value}; }}@each $key,$value in (abso:absolute,fixe: fixed,rela:relative, stat:static) { .posi-#{$key}{ position:#{$value}; }}@for $i from 01 through 10{ //宽度小于内容1/3 .zind-#{$i}{ z-index: 10 * $i; }}@each $key,$value in(t:top,r: right,b:bottom, l:left){ @for $i from 1 through 25{ .mar-#{$key}-#{$i}{//例：mar-l-1 margin-#{$value}:8px*$i; } .pad-#{$key}-#{$i}{//例：pad-l-1 padding-#{$value}:8px*$i; } .#{$key}-#{$i}{//例：l-1 #{$value}:8px*$i; } }}@for $i from 1 through 25{ .pad-x-#{$i}{ padding: 0 8px*$i 0; } .pad-y-#{$i}{ padding: 8px*$i 0; } .pad-xy-#{$i}{ padding: 8px*$i; } .mar-x-#{$i}{ margin: 0 8px*$i 0; } .mar-y-#{$i}{ margin: 8px*$i 0; } .mar-xy-#{$i}{ margin: 8px*$i; }}.mar-x-auto{ margin: 0 auto;}.back-whil{ background: #fff;}
