@import "./mixins/mixins";
@import "./mixins/utils.scss";

// 1
// b
// @mixin b($block) {
//   $B: $namespace+'-'+$block !global;
//   .#{$B} { // el-row
//     @content;
//   }
// }

// 2
// utils-clearfix
// 清除浮动
// @mixin utils-clearfix {
//   $selector: &;
//   @at-root {
//     #{$selector}::before,
//     #{$selector}::after {
//       display: table;
//       content: ""; // 不占大小
//     }
//     #{$selector}::after {
//       clear: both // 清除浮动
//     }
//   }
// }

// 3
// @mixin m($modifier) {
//   $selector: &;
//   $currentSelector: "";
//   @each $unit in $modifier {
//     $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","};
//   }
//   @at-root {
//     #{$currentSelector} {
//       @content;
//     }
//   }
// }

// 4
// @mixin when($state) {
//   @at-root {
//     &.#{$state-prefix + $state} { // is + $state
//       @content;
//     }
//   }
// }

@include b(row) {
  position: relative;
  box-sizing: border-box;
  @include utils-clearfix; // 清除浮动

  @include m(flex) {
    display: flex;
    &:before,
    &:after {
      display: none;
    }

    @include when(justify-center) {
      justify-content: center;
    }
    @include when(justify-end) {
      justify-content: flex-end;
    }
    @include when(justify-space-between) {
      justify-content: space-between;
    }
    @include when(justify-space-around) {
      justify-content: space-around;
    }

    @include when(align-top) {
      align-items: flex-start;
    }

    @include when(align-middle) {
      align-items: center;
    }
    @include when(align-bottom) {
      align-items: flex-end;
    }
  }
}