Sass(SCSS)でflexboxのComponentをつくる

Sassでflexboxを使う際はMixinで一括設定するのが王道かと思いますが，個人的にはclassとして直接書きたいのでcomponentとしてまとめました．

SCSS

各クラスの命名規則はEmmetに基づいています．
また，ベンダープレフィックスに関してはコンパイル時に付与するものとし，省略をしています．

_c-flex.scss

@charset 'UTF-8';
/*
  Flex
-----------------------------------------------------*/

.c-flex {
  display: flex;

  &.-fxd {
    &-c {
      flex-direction: column;
    }
    &-cr {
      flex-direction: column-reverse;
    }
    &-r {
      flex-direction: row;
    }
    &-rr {
      flex-direction: row-reverse;
    }
  }

  &.-fxw {
    &-n {
      flex-wrap: nowrap;
    }
    &-w {
      flex-wrap: wrap;
    }
    &-wr {
      flex-wrap: wrap-reverse;
    }
  }

  &.-jc {
    &-c {
      justify-content: center;
    }
    &-fe {
      justify-content: flex-end;
    }
    &-fs {
      justify-content: flex-start;
    }
    &-sa {
      justify-content: space-around;
    }
    &-sb {
      justify-content: space-between;
    }
  }

  &.-ai {
    &-b {
      align-items: baseline;
    }
    &-c {
      align-items: center;
    }
    &-fe {
      align-items: flex-end;
    }
    &-fs {
      align-items: flex-start;
    }
    &-s {
      align-items: stretch;
    }
  }

  &.-ac {
    &-c {
      align-content: center;
    }
    &-fe {
      align-content: flex-end;
    }
    &-fs {
      align-content: flex-start;
    }
    &-s {
      align-content: stretch;
    }
    &-sa {
      align-content: space-around;
    }
    &-sb {
      align-content: space-between;
    }
  }
}

.c-flex__item {
  &.-ord {
    @for $i from 1 through 10 {
      &-#{$i} {
        order: $i;
      }
    }
  }
}

記入例

index.html

<div class="c-flex -fxd-c -jc-c">
  ...
</div>

コンパイル後，このように適用されます．

common.css

.c-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.c-flex.-fxd-c {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.c-flex.-jc-c {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

flex item

子要素のプロパティはorder以外ほとんど使わない気がするので
orderのみ1-10まで指定できるようにしています．

index.html

<div class="c-flex">
  <div class="c-flex__item -ord-2">
  <div class="c-flex__item -ord-1">
  <div class="c-flex__item -ord-3">
</div>