//宽高, 大小相关样式
@use "sass:math";
@use "sass:list";

@use "../define/size.scss" as *;

$full-width: 750rpx;

.height {
	//数字形式 : height-100 表示100rpx; height-5 表示5rpx，等等
	@each $key, $w in $exact-sizes {
		&-#{''+$key} {
			height: $w;
		}
	}
}
.width {
	&-auto {
		width: auto;
	}
	&-full {
		width: $full-width;
	}
	&-half {
		width: $full-width*0.5;
	}
	&-one-third {
		width: math.div($full-width, 3);
	}
	&-one-fourth {
		width: $full-width*0.25;
	}
	&-one-fifth {
		width: $full-width*0.2;
	}
	&-one-sixth {
		width: math.div($full-width, 6);
	}
	&-one-eighth {
		width: $full-width*0.125;
	}
	&-one-tenth {
		width: $full-width*0.1;
	}
	
	//数字形式: width-1-2 表示 二分之一； width-4-9 表示 9分之4，等等
	@for $i from 2 to 10 {
		&-1-#{$i} {
			width: math.percentage(math.div(1, $i));
		}
		
		@for $j from 2 to $i {
			&-#{$j}-#{$i} {
				width: $full-width*math.div($j, $i);
			}
		}
	}
	
	//数字形式 2: width-100 表示100rpx; width-5 表示5rpx，等等
	@each $key, $w in $exact-sizes {
		&-#{''+$key} {
			width: $w;
		}
	}
}
.size {
	@each $key, $size in $font-sizes {
		&-#{''+$key} {
			font-size: $size;
		}
	}
}
.image-size {
	@each $key, $size in $image-sizes {
		&-#{''+$key} {
			width: $size;
			height: $size;
		}
	}
}
