//字体大小
@for $i from 10 through 36 {
  .f#{$i} {
    font-size: .01rem *2 * $i;
  }
}

//外边距与内边距
@for $i from 5 through 100 {
  @if $i%5==0 {
    .pt#{$i} {
      padding-top: .01rem *2 * $i;
    }
    .pb#{$i} {
      padding-bottom: .01rem *2 * $i;
    }
    .pl#{$i} {
      padding-left: .01rem *2 * $i;
    }
    .pr#{$i} {
      padding-right: .01rem *2 * $i;
    }
    .mt#{$i} {
      margin-top: .01rem *2 * $i;
    }
    .mb#{$i} {
      margin-bottom: .01rem *2 * $i;
    }
    .ml#{$i} {
      margin-left: .01rem *2 * $i;
    }
    .mr#{$i} {
      margin-right: .01rem *2 * $i;
    }
  }
}

//外边距与内边距
@for $i from 2 through 16 {
  @if $i%2==0 {
    .pt#{$i} {
      padding-top: .01rem *2 * $i;
    }
    .pb#{$i} {
      padding-bottom: .01rem *2 * $i;
    }
    .pl#{$i} {
      padding-left: .01rem *2 * $i;
    }
    .pr#{$i} {
      padding-right: .01rem *2 * $i;
    }
    .mt#{$i} {
      margin-top: .01rem *2 * $i;
    }
    .mb#{$i} {
      margin-bottom: .01rem *2 * $i;
    }
    .ml#{$i} {
      margin-left: .01rem *2 * $i;
    }
    .mr#{$i} {
      margin-right: .01rem *2 * $i;
    }
  }
}

//行为相关颜色 背景/color
@each $key, $value in $behavior {
  .color-#{"" + $key} {
    color: $value;
  }
  .bg-color-#{"" + $key} {
    background-color: $value;
  }
}

//字体颜色 color
@each $key, $value in $text-colors {
  .text-#{"" + $key} {
    color: $value;
  }
}
