sass 和less 语法有差异需要转化一下

$directionList: row, row-reverse, column, column-reverse;
$justifyContentList: flex-start, flex-end, center, space-between, space-around, space-evenly;
$alignItemsList: flex-start, flex-end, center, baseline, stretch;@mixin generateFlex($dr, $JC, $AI, $dir, $jc, $ai) {@if ($ai == center) {// flex-x-center.flex-#{$dr}-#{$JC} {display: flex;flex-direction: $dir;justify-content: $jc;align-items: center;}} @else {.flex-#{$dr}-#{$JC}-#{$AI} {display: flex;flex-direction: $dir;justify-content: $jc;align-items: $ai;}}
}@each $dir in $directionList {$dr: if($dir == row, x, if($dir == column, y, $dir));@each $jc in $justifyContentList {$JC: if($jc == flex-start, start, if($jc == flex-end, end, if($jc == space-between, between, if($jc == space-evenly, evenly, if($jc == space-around, around, $jc)))));@each $ai in $alignItemsList {$AI: if($ai == flex-start, start, if($ai == flex-end, end, $ai));@include generateFlex($dr, $JC, $AI, $dir, $jc, $ai);}}
}

编译后

.flex-x-start-start {align-items: flex-start;display: flex;flex-direction: row;justify-content: flex-start;
}
.flex-x-start-end {align-items: flex-end;display: flex;flex-direction: row;justify-content: flex-start;
}
.flex-x-start {align-items: center;display: flex;flex-direction: row;justify-content: flex-start;
}
.flex-x-start-baseline {align-items: baseline;display: flex;flex-direction: row;justify-content: flex-start;
}
.flex-x-start-stretch {align-items: stretch;display: flex;flex-direction: row;justify-content: flex-start;
}
.flex-x-end-start {align-items: flex-start;display: flex;flex-direction: row;justify-content: flex-end;
}
.flex-x-end-end {align-items: flex-end;display: flex;flex-direction: row;justify-content: flex-end;
}
.flex-x-end {align-items: center;display: flex;flex-direction: row;justify-content: flex-end;
}
.flex-x-end-baseline {align-items: baseline;display: flex;flex-direction: row;justify-content: flex-end;
}
.flex-x-end-stretch {align-items: stretch;display: flex;flex-direction: row;justify-content: flex-end;
}
.flex-x-center-start {align-items: flex-start;display: flex;flex-direction: row;justify-content: center;
}
.flex-x-center-end {align-items: flex-end;display: flex;flex-direction: row;justify-content: center;
}
.flex-x-center {align-items: center;display: flex;flex-direction: row;justify-content: center;
}
.flex-x-center-baseline {align-items: baseline;display: flex;flex-direction: row;justify-content: center;
}
.flex-x-center-stretch {align-items: stretch;display: flex;flex-direction: row;justify-content: center;
}
.flex-x-between-start {align-items: flex-start;display: flex;flex-direction: row;justify-content: space-between;
}
.flex-x-between-end {align-items: flex-end;display: flex;flex-direction: row;justify-content: space-between;
}
.flex-x-between {align-items: center;display: flex;flex-direction: row;justify-content: space-between;
}
.flex-x-between-baseline {align-items: baseline;display: flex;flex-direction: row;justify-content: space-between;
}
.flex-x-between-stretch {align-items: stretch;display: flex;flex-direction: row;justify-content: space-between;
}
.flex-x-around-start {align-items: flex-start;display: flex;flex-direction: row;justify-content: space-around;
}
.flex-x-around-end {align-items: flex-end;display: flex;flex-direction: row;justify-content: space-around;
}
.flex-x-around {align-items: center;display: flex;flex-direction: row;justify-content: space-around;
}
.flex-x-around-baseline {align-items: baseline;display: flex;flex-direction: row;justify-content: space-around;
}
.flex-x-around-stretch {align-items: stretch;display: flex;flex-direction: row;justify-content: space-around;
}
.flex-row-reverse-start-start {align-items: flex-start;display: flex;flex-direction: row-reverse;justify-content: flex-start;
}
.flex-row-reverse-start-end {align-items: flex-end;display: flex;flex-direction: row-reverse;justify-content: flex-start;
}
.flex-row-reverse-start {align-items: center;display: flex;flex-direction: row-reverse;justify-content: flex-start;
}
.flex-row-reverse-start-baseline {align-items: baseline;display: flex;flex-direction: row-reverse;justify-content: flex-start;
}
.flex-row-reverse-start-stretch {align-items: stretch;display: flex;flex-direction: row-reverse;justify-content: flex-start;
}
.flex-row-reverse-end-start {align-items: flex-start;display: flex;flex-direction: row-reverse;justify-content: flex-end;
}
.flex-row-reverse-end-end {align-items: flex-end;display: flex;flex-direction: row-reverse;justify-content: flex-end;
}
.flex-row-reverse-end {align-items: center;display: flex;flex-direction: row-reverse;justify-content: flex-end;
}
.flex-row-reverse-end-baseline {align-items: baseline;display: flex;flex-direction: row-reverse;justify-content: flex-end;
}
.flex-row-reverse-end-stretch {align-items: stretch;display: flex;flex-direction: row-reverse;justify-content: flex-end;
}
.flex-row-reverse-center-start {align-items: flex-start;display: flex;flex-direction: row-reverse;justify-content: center;
}
.flex-row-reverse-center-end {align-items: flex-end;display: flex;flex-direction: row-reverse;justify-content: center;
}
.flex-row-reverse-center {align-items: center;display: flex;flex-direction: row-reverse;justify-content: center;
}
.flex-row-reverse-center-baseline {align-items: baseline;display: flex;flex-direction: row-reverse;justify-content: center;
}
.flex-row-reverse-center-stretch {align-items: stretch;display: flex;flex-direction: row-reverse;justify-content: center;
}
.flex-row-reverse-between-start {align-items: flex-start;display: flex;flex-direction: row-reverse;justify-content: space-between;
}
.flex-row-reverse-between-end {align-items: flex-end;display: flex;flex-direction: row-reverse;justify-content: space-between;
}
.flex-row-reverse-between {align-items: center;display: flex;flex-direction: row-reverse;justify-content: space-between;
}
.flex-row-reverse-between-baseline {align-items: baseline;display: flex;flex-direction: row-reverse;justify-content: space-between;
}
.flex-row-reverse-between-stretch {align-items: stretch;display: flex;flex-direction: row-reverse;justify-content: space-between;
}
.flex-row-reverse-around-start {align-items: flex-start;display: flex;flex-direction: row-reverse;justify-content: space-around;
}
.flex-row-reverse-around-end {align-items: flex-end;display: flex;flex-direction: row-reverse;justify-content: space-around;
}
.flex-row-reverse-around {align-items: center;display: flex;flex-direction: row-reverse;justify-content: space-around;
}
.flex-row-reverse-around-baseline {align-items: baseline;display: flex;flex-direction: row-reverse;justify-content: space-around;
}
.flex-row-reverse-around-stretch {align-items: stretch;display: flex;flex-direction: row-reverse;justify-content: space-around;
}
.flex-y-start-start {align-items: flex-start;display: flex;flex-direction: column;justify-content: flex-start;
}
.flex-y-start-end {align-items: flex-end;display: flex;flex-direction: column;justify-content: flex-start;
}
.flex-y-start {align-items: center;display: flex;flex-direction: column;justify-content: flex-start;
}
.flex-y-start-baseline {align-items: baseline;display: flex;flex-direction: column;justify-content: flex-start;
}
.flex-y-start-stretch {align-items: stretch;display: flex;flex-direction: column;justify-content: flex-start;
}
.flex-y-end-start {align-items: flex-start;display: flex;flex-direction: column;justify-content: flex-end;
}
.flex-y-end-end {align-items: flex-end;display: flex;flex-direction: column;justify-content: flex-end;
}
.flex-y-end {align-items: center;display: flex;flex-direction: column;justify-content: flex-end;
}
.flex-y-end-baseline {align-items: baseline;display: flex;flex-direction: column;justify-content: flex-end;
}
.flex-y-end-stretch {align-items: stretch;display: flex;flex-direction: column;justify-content: flex-end;
}
.flex-y-center-start {align-items: flex-start;display: flex;flex-direction: column;justify-content: center;
}
.flex-y-center-end {align-items: flex-end;display: flex;flex-direction: column;justify-content: center;
}
.flex-y-center {align-items: center;display: flex;flex-direction: column;justify-content: center;
}
.flex-y-center-baseline {align-items: baseline;display: flex;flex-direction: column;justify-content: center;
}
.flex-y-center-stretch {align-items: stretch;display: flex;flex-direction: column;justify-content: center;
}
.flex-y-between-start {align-items: flex-start;display: flex;flex-direction: column;justify-content: space-between;
}
.flex-y-between-end {align-items: flex-end;display: flex;flex-direction: column;justify-content: space-between;
}
.flex-y-between {align-items: center;display: flex;flex-direction: column;justify-content: space-between;
}
.flex-y-between-baseline {align-items: baseline;display: flex;flex-direction: column;justify-content: space-between;
}
.flex-y-between-stretch {align-items: stretch;display: flex;flex-direction: column;justify-content: space-between;
}
.flex-y-around-start {align-items: flex-start;display: flex;flex-direction: column;justify-content: space-around;
}
.flex-y-around-end {align-items: flex-end;display: flex;flex-direction: column;justify-content: space-around;
}
.flex-y-around {align-items: center;display: flex;flex-direction: column;justify-content: space-around;
}
.flex-y-around-baseline {align-items: baseline;display: flex;flex-direction: column;justify-content: space-around;
}
.flex-y-around-stretch {align-items: stretch;display: flex;flex-direction: column;justify-content: space-around;
}
.flex-column-reverse-start-start {align-items: flex-start;display: flex;flex-direction: column-reverse;justify-content: flex-start;
}
.flex-column-reverse-start-end {align-items: flex-end;display: flex;flex-direction: column-reverse;justify-content: flex-start;
}
.flex-column-reverse-start {align-items: center;display: flex;flex-direction: column-reverse;justify-content: flex-start;
}
.flex-column-reverse-start-baseline {align-items: baseline;display: flex;flex-direction: column-reverse;justify-content: flex-start;
}
.flex-column-reverse-start-stretch {align-items: stretch;display: flex;flex-direction: column-reverse;justify-content: flex-start;
}
.flex-column-reverse-end-start {align-items: flex-start;display: flex;flex-direction: column-reverse;justify-content: flex-end;
}
.flex-column-reverse-end-end {align-items: flex-end;display: flex;flex-direction: column-reverse;justify-content: flex-end;
}
.flex-column-reverse-end {align-items: center;display: flex;flex-direction: column-reverse;justify-content: flex-end;
}
.flex-column-reverse-end-baseline {align-items: baseline;display: flex;flex-direction: column-reverse;justify-content: flex-end;
}
.flex-column-reverse-end-stretch {align-items: stretch;display: flex;flex-direction: column-reverse;justify-content: flex-end;
}
.flex-column-reverse-center-start {align-items: flex-start;display: flex;flex-direction: column-reverse;justify-content: center;
}
.flex-column-reverse-center-end {align-items: flex-end;display: flex;flex-direction: column-reverse;justify-content: center;
}
.flex-column-reverse-center {align-items: center;display: flex;flex-direction: column-reverse;justify-content: center;
}
.flex-column-reverse-center-baseline {align-items: baseline;display: flex;flex-direction: column-reverse;justify-content: center;
}
.flex-column-reverse-center-stretch {align-items: stretch;display: flex;flex-direction: column-reverse;justify-content: center;
}
.flex-column-reverse-between-start {align-items: flex-start;display: flex;flex-direction: column-reverse;justify-content: space-between;
}
.flex-column-reverse-between-end {align-items: flex-end;display: flex;flex-direction: column-reverse;justify-content: space-between;
}
.flex-column-reverse-between {align-items: center;display: flex;flex-direction: column-reverse;justify-content: space-between;
}
.flex-column-reverse-between-baseline {align-items: baseline;display: flex;flex-direction: column-reverse;justify-content: space-between;
}
.flex-column-reverse-between-stretch {align-items: stretch;display: flex;flex-direction: column-reverse;justify-content: space-between;
}
.flex-column-reverse-around-start {align-items: flex-start;display: flex;flex-direction: column-reverse;justify-content: space-around;
}
.flex-column-reverse-around-end {align-items: flex-end;display: flex;flex-direction: column-reverse;justify-content: space-around;
}
.flex-column-reverse-around {align-items: center;display: flex;flex-direction: column-reverse;justify-content: space-around;
}
.flex-column-reverse-around-baseline {align-items: baseline;display: flex;flex-direction: column-reverse;justify-content: space-around;
}
.flex-column-reverse-around-stretch {align-items: stretch;display: flex;flex-direction: column-reverse;justify-content: space-around;
}