@import "./structure.scss";
@import "./var.scss";

/* 辅助函数
--------------------------------------------------------------------- */
//遍历主题map
@mixin map-structures {
  @each $structure-name, $structure-map in $structures {
    //!global 把局部变量强升为全局变量
    $structure-map: $structure-map !global;
    //#{}是sass的插值表达式
    //& sass嵌套里的父容器标识   @content是混合器插槽，像vue的slot
    .#{$structure-name} & {
      @content;
    }
  }
}

//声明一个根据Key获取颜色的function
@function structure-content($key) {
  @return map-get($structure-map, $key);
}
/* end
--------------------------------------------------------------------- */

/* 抽离出样式的委托函数
--------------------------------------------------------------------- */
// 字体大小
@mixin structure-font-size($category, $indent, $isImportant: $--not-important) {
  @include map-structures {
    @if $isImportant == $--important {
      font-size: structure-content($category) + $indent !important;
    }

    @else {
      font-size: structure-content($category) + $indent;
    }
  }
}

// 组件高度
@mixin structure-height($category, $isImportant: $--not-important) {
  @include map-structures {
    @if $isImportant == $--important {
      height: structure-content($category) !important;
    }

    @else {
      height: structure-content($category);
    }
  }
}

// 组件行高
@mixin structure-line-height($category, $isImportant: $--not-important) {
  @include map-structures {
    @if $isImportant == $--important {
      line-height: structure-content($category) !important;
    }

    @else {
      line-height: structure-content($category);
    }
  }
}

// 内边距
@mixin structure-padding($category, $isImportant: $--not-important) {
  @include map-structures {
    @if $isImportant == $--important {
      padding: structure-content($category) !important;
    }

    @else {
      padding: structure-content($category);
    }
  }
}