【CSS in Depth 2 精译_059】9.2 把 CSS 模块组合成更大的结构

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;
}