// $sizes: 0,1,2,3,4,5,6,7,8,9,10,11,12,14,16,20,24,28,32,36,40,44,48,52,56,60,64,72,80,96;
$varPre: '';
// 尺寸相关
$percents: 2,3,4,5,6,12;
$pxs: '0' 0 ,'px' 1 ,'0-5' 2 ,'1' 4 ,'1-5' 6 ,'2' 8 ,'2-5' 10 ,'3' 12 ,'3-5' 14 ,'4' 16 ,'5' 20 ,'6' 24 ,'7' 28 ,'8' 32 ,'9' 36 ,'10' 40 ,'11' 44 ,'12' 48 ,'14' 56 ,'16' 64 ,'20' 80 ,'24' 96 ,'28' 112 ,'32' 128 ,'36' 144 ,'40' 160 ,'44' 176 ,'48' 192 ,'52' 208 ,'56' 224 ,'60' 240 ,'64' 256 ,'72' 288 ,'80' 320 ,'96' 384;
$pxNames: '0' ,'px' ,'0-5' ,'1' ,'1-5' ,'2' ,'2-5' ,'3' ,'3-5' ,'4' ,'5' ,'6' ,'7' ,'8' ,'9' ,'10' ,'11' ,'12' ,'14' ,'16' ,'20' ,'24' ,'28' ,'32' ,'36' ,'40' ,'44' ,'48' ,'52' ,'56' ,'60' ,'64' ,'72' ,'80' ,'96';
$pctNames: '1_2' ,'1_3' ,'2_3' ,'1_4' ,'2_4' ,'3_4' ,'1_5' ,'2_5' ,'3_5' ,'4_5' ,'1_6' ,'2_6' ,'3_6' ,'4_6' ,'5_6' ,'1_12' ,'2_12' ,'3_12' ,'4_12' ,'5_12' ,'6_12' ,'7_12' ,'8_12' ,'9_12' ,'10_12' ,'11_12';

@mixin setVar($varName, $val) {
	#{$varName}: #{$val};
}

@mixin setPageRpxVar {
	@each $name, $v in $pxs {
		$varName: --#{$varPre}rpx-#{$name};
		@if($name == 'px') {
			@include setVar($varName, #{$v}rpx);
		} @else {
			@include setVar($varName, #{$v * 2}rpx);
		}
	}
}

@mixin setPagePercentVar {
	// 百分比
	@each $s in $percents { // ($i / $s) 待编辑器内sass版本升级 变为 math.div(a, b) 方式不报错
		@for $i from 1 through $s {
			@if $i < $s { 
				$varName: --#{$varPre}percent-#{$i}_#{$s};
				$val: calc(#{$i} / #{$s} * 100%);
				@include setVar($varName, $val);
			} 
		}
	}
	
	@include setVar(--#{$varPre}percent-full, 100%);
	@include setVar(--#{$varPre}percent-auto, auto);
	@include setVar(--#{$varPre}w-screen, 100vw);
	@include setVar(--#{$varPre}h-screen, 100vh);
}


// px & percent 公用函数 调用页面实现render函数即可
@mixin setPxs($pxs) {
	@each $name in $pxs{
		$varName: --#{$varPre}rpx-#{$name};
		@include render($name, $varName);
	}
}

@mixin setPcts($pxs) {
	@each $name in $pxs{
		$varName: --#{$varPre}percent-#{$name};
		@include render($name, $varName);
	}
}


// 文字相关设置
$fontSizes: '3xs' 10, '2xs' 11, 'xs' 12, 'mini' 13, 'sm' 14, 'md' 15, 'base' 16, 'lg' 18, 'xl' 20, '2xl' 24, '3xl' 30, '4xl' 36, '5xl' 48, '6xl' 60, '7xl' 72, '8xl' 96, '9xl' 128;
$fontSizeLineHeights: 12, 14, 16, 18, 20, 22, 24, 28, 28, 32, 36, 40, -1, -2, -3, -4, -5;
$fontSizeVars: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15;

@mixin getFontSizeAndLineHeight($lineHeight, $fname, $fval) {
	$varFontSizeName: --#{$varPre}text-#{$fname};
	$varFontLineHeightName: --#{$varPre}text-#{$fname}-line-height;
	#{$varFontSizeName}: #{$fval * 2}rpx;
	@if($lineHeight > 10) {
		#{$varFontLineHeightName}: #{$lineHeight * 2}rpx;
	} @else {
		#{$varFontLineHeightName}: 1;
	}    
}
@mixin setPageFontSizeAndLineHeightVar {
	@each $i in $fontSizeVars {
		$n: index($fontSizeVars, $i);
		$fsize: nth($fontSizes, $n);
	  $fname: nth($fsize, 1);
	  $fval: nth($fsize, 2);
		$lineHeight: nth($fontSizeLineHeights, $n);
		@include getFontSizeAndLineHeight($lineHeight, $fname, $fval);
	}
}

// Font.scss 用
@mixin setFontSizes($fontSizes) {
	@each $name, $val in $fontSizes{
		$varName: --#{$varPre}text-#{$name};
		$varLhName: --#{$varPre}text-#{$name}-lineHeight;
		@include render($name, $varName, $varLhName);
	}
}

// border Radius
$borderRadius: 'none' 0, 'sm' 2, '' 4, 'md' 6, 'lg' 8, 'xl' 12, '2xl' 16, '3xl' 24, 'full' 9999;

@mixin setBorderRadiusVar {
	@each $name, $val in $borderRadius {
    $varName: '';
		@if($name != '') {
			$varName: --#{$varPre}rounded-#{$name};
		} @else {
			$varName: --#{$varPre}rounded;
		}
		@include setVar($varName, #{$val * 2}rpx);
	}
}
// BorderRadius.scss 用
@mixin setBorderRadius($arr) {
	@each $name, $val in $arr{
		$varName: '';
		@if($name != '') {
			$varName: --#{$varPre}rounded-#{$name};
		} @else {
			$varName: --#{$varPre}rounded;
		}
		@include render($name, $varName);
	}
}


page {
	@include setPageRpxVar;
	@include setPagePercentVar;
	@include setPageFontSizeAndLineHeightVar;
	@include setBorderRadiusVar;
}