mall_client/zyhs_app_java/zyhs3_uniapp/scss/index.scss

// TODO: 这里用于生成 margin 与 padding 各个方向的边距 1-100px的css

// 定义变量
$prefix: 'm'; // 类名前缀
$directions: (
  // 方向缩写与属性值的映射关系（左）
  'l': 'left',
  // 方向缩写与属性值的映射关系（右）
  'r': 'right',
  // 方向缩写与属性值的映射关系（底部）
  'b': 'bottom',
  // 方向缩写与属性值的映射关系（顶部）
  't': 'top'
);
$step: 1; // 步长
$max: 40; // 最大值
$properties: (
  // 属性缩写与属性名称的映射关系（外边距）
  'm': 'margin',
  // 属性缩写与属性名称的映射关系（内边距）
  'p': 'padding',
  // 属性缩写与属性名称的映射关系（外边距）
  'w': 'width',
  // 属性缩写与属性名称的映射关系（内边距）
  'h': 'height'
);

// 循环生成margin,padding设置语句
@each $dirKey, $dirValue in $directions {
  @for $i from 1 through ceil($max / $step) {
    @each $propKey, $propValue in $properties {
      // 组合生成类名
      $className: $propKey  + $dirKey  +  $i * $step;
      .#{$className} {
        // 生成对应的CSS样式规则
        #{$propValue}-#{$dirValue}: #{$i * $step * 4}rpx;
      }
	  .#{$propKey + $i * $step} {
	    // 生成对应的CSS样式规则
	    #{$propValue}: #{$i * $step * 4}rpx;
	  }
	  
    }
  }
}

$properties_wh: (
  // 属性缩写与属性名称的映射关系（外边距）
  'w': 'width',
  // 属性缩写与属性名称的映射关系（内边距）
  'h': 'height'
);

@for $i from 1 through ceil($max / $step) {
    @each $propKey, $propValues in $properties_wh {
      // 组合生成类名
      $className: $propKey  +  $i;
      .w4 {
        // 生成对应的CSS样式规则
        width: #{$i * $step * 4}rpx;
      }
    }
  }

$colors: (
  t1: #000000,
  t2: #2F2424,
  t3: #484848,
  t4: #808080,
  t5: #C0C0C0,
  tn: #FF1B3C 
);

@each $className, $color in $colors {
  .#{$className} {
    color: $color;
  }
}

$bgs: (
  b1: #000000,
  b2: #2F2424,
  b3: #484848,
  b4: #808080,
  b5: #C0C0C0,
  bf:#fff,
  bn: #FF1B3C 
);

@each $className, $color in $bgs {
  .#{$className} {
    background: $color;
  }
}

$weights: (
  w100: 100,
  w200: 200,
  w500: 500,
  w600: 600,
);

@each $className, $color in weights {
  .#{$className} {
    font-weight: $color;
  }
}
$sizes: (
  f10: 20rpx,
  f12: 24rpx,
  f14: 28rpx,
  f16: 32rpx,
);

@each $className, $size in $sizes {
  .#{$className} {
    font-size: $size;
  }
}
.w600{
	font-weight: 600;
}

.rounded{
	border-radius: 8rpx;
}

.items-baseline{
	align-items: baseline;
}
.w500{
	font-weight: 500;
}
.youhuiquan{
	-webkit-mask-image: radial-gradient(circle at 2px, transparent 2px, red 1px);
	-webkit-mask-position: -2px;
	-webkit-mask-size: 100% 16px;
}