@import "function";
@import "../common/var";

/* BEM
 -------------------------- */
@mixin b($block) {
  $B: $namespace + "-" + $block !global;

  .#{$B} {
    // 这里其实就是引用了 $B 变量做为class名 ---> el-$block，比如 el-row
    @content;
  }
  // $B
  // 1. 这里的 $namespace = el
  // 2. 定义 $namespace 的文件在：theme-chalk/mixins/config.scss 中
  // 3. $block 是参数，表示BEM中的block

  // @content 是 @include 花括号中的值
  // 注意三者的关系：@mixin @include @content

  // #{$B} 是插值语句
  // - 插值语句可以在 选择器 或者 属性名 中使用 变量

  // !global 表示提升为全局变量
}

@mixin m($modifier) {
  $selector: &;
  $currentSelector: "";
  @each $unit in $modifier {
    $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","};
  }
  // $modifier-separator: '--';
  // $namespace: 'di';
  // $element-separator: '__';
  // $state-prefix: 'is-';
  //    &--flex
  //    .el-row--flex

  // $currentSelector变量的初始值 ‘’ -> 会在循环中被覆盖掉
  // - 例如
  //  - $currentSelector: "";
  //  - $currentSelector: .el-row-flex

  @at-root {
    #{$currentSelector} { // 例如 .el-row--flex
      @content;
    }
  }
}

@mixin when($state) {
  @at-root {
    &.#{$state-prefix + $state} {
      @content;
    }
    // .di-row.is-justify-center
  }
  // 1
  // $state-prefix: 'is-';
}




/* Break-points
 -------------------------- */
 @mixin res($key, $map: $--breakpoints) {
  // 循环断点Map，如果存在则返回
  @if map-has-key($map, $key) {
    @if $key=='sm-only'or $key=='md-only'or $key=='lg-only' {
      // 判定特定定义处理字符串参数值问题
      @media only screen and #{unquote(map-get($map, $key))} {
        @content;
      }
    }

    @else {
      @media only screen and #{inspect(map-get($map, $key))} {
        @content;
      }
    }
  } @else {
    @warn "Undefeined points: `#{$map}`";
  }
}