@import "var";

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

@for $percent from 0 to 100 {
  .w-p-#{$percent} {
    width: #{$percent}#{'%'};
  }
  .h-p-#{$percent} {
    height: #{$percent}#{'%'};
  }
}


@for $i from 1 through 30 {
  .h-#{$i} {
    height: #{$i}px;
  }
}

@for $i from 1 through 30 {
  .w-#{$i} {
    width: #{$i}px;
  }
}


@each $i in $sizes {
  .w-#{$i} {
    width: #{$i}px;
  }
  .h-#{$i} {
    height: #{$i}px;
  }
  .max-w-#{$i} {
    max-width: #{$i}px;
  }
  .max-h-#{$i} {
    max-height: #{$i}px;
  }
  .min-w-#{$i} {
    min-width: #{$i}px;
  }
  .min-h-#{$i} {
    min-height: #{$i}px;
  }
}

// 定义vw wh
@for $size from 1 through 100 {
  .w-#{$size}vw {
    width: #{$size}vw;
  }
  .w-#{$size}vh {
    width: #{$size}vh;
  }
  .h-#{$size}vw {
    height: #{$size}vw;
  }
  .h-#{$size}vh {
    height: #{$size}vh;
  }
}