scss 动态渲染常用变量 ----- uniapp版

/* 字体大小 */
$size: 50;
@for $i from 1 through $size {.size-#{$i} {font-size: #{$i * 2}rpx;}.lh-#{$i} {line-height: #{$i * 2}rpx;}
}
$color_key: '#';
/* 常用颜色1 */
@each $color in c, d, e, f, 0, 3, 5, 6, 8, 9 {.cr-#{$color} {color: #{$color_key}#{$color}#{$color}#{$color}#{$color}#{$color}#{$color};}.bg-#{$color} {background-color: #{$color_key}#{$color}#{$color}#{$color}#{$color}#{$color}#{$color};}.br-#{$color} {border: 2rpx solid #{$color_key}#{$color}#{$color}#{$color}#{$color}#{$color}#{$color};}.br-t-#{$color} {border-top: 2rpx solid #{$color_key}#{$color}#{$color}#{$color}#{$color}#{$color}#{$color};}.br-l-#{$color} {border-left: 2rpx solid #{$color_key}#{$color}#{$color}#{$color}#{$color}#{$color}#{$color};}.br-r-#{$color} {border-right: 2rpx solid #{$color_key}#{$color}#{$color}#{$color}#{$color}#{$color}#{$color};}.br-b-#{$color} {border-bottom: 2rpx solid #{$color_key}#{$color}#{$color}#{$color}#{$color}#{$color}#{$color};}.br-#{$color}-dashed {border: 2rpx dashed #{$color_key}#{$color}#{$color}#{$color}#{$color}#{$color}#{$color};}.br-t-#{$color}-dashed {border-top: 2rpx dashed #{$color_key}#{$color}#{$color}#{$color}#{$color}#{$color}#{$color};}.br-l-#{$color}-dashed {border-left: 2rpx dashed #{$color_key}#{$color}#{$color}#{$color}#{$color}#{$color}#{$color};}.br-r-#{$color}-dashed {border-right: 2rpx dashed #{$color_key}#{$color}#{$color}#{$color}#{$color}#{$color}#{$color};}.br-b-#{$color}-dashed {border-bottom: 2rpx dashed #{$color_key}#{$color}#{$color}#{$color}#{$color}#{$color}#{$color};}
}/* 常用颜色2 */
@each $color in f5, f8, f7, e9, 80 {.cr-#{$color} {color: #{$color_key}#{$color}#{$color}#{$color};}.bg-#{$color} {background-color: #{$color_key}#{$color}#{$color}#{$color};}.br-#{$color} {border: 2rpx solid #{$color_key}#{$color}#{$color}#{$color};}.br-t-#{$color} {border-top: 2rpx solid #{$color_key}#{$color}#{$color}#{$color};}.br-l-#{$color} {border-left: 2rpx solid #{$color_key}#{$color}#{$color}#{$color};}.br-r-#{$color} {border-right: 2rpx solid #{$color_key}#{$color}#{$color}#{$color};}.br-b-#{$color} {border-bottom: 2rpx solid #{$color_key}#{$color}#{$color}#{$color};}.br-#{$color}-dashed {border: 2rpx dashed #{$color_key}#{$color}#{$color}#{$color};}.br-t-#{$color}-dashed {border-top: 2rpx dashed #{$color_key}#{$color}#{$color}#{$color};}.br-l-#{$color}-dashed {border-left: 2rpx dashed #{$color_key}#{$color}#{$color}#{$color};}.br-r-#{$color}-dashed {border-right: 2rpx dashed #{$color_key}#{$color}#{$color}#{$color};}.br-b-#{$color}-dashed {border-bottom: 2rpx dashed #{$color_key}#{$color}#{$color}#{$color};}
}/* 定位 */
$position: 20;
@for $i from 0 through $position {.top-#{$i} {top: #{$i * 2}rpx;}.bottom-#{$i} {bottom: #{$i * 2}rpx;}.left-#{$i} {left: #{$i * 2}rpx;}.right-#{$i} {right: #{$i * 2}rpx;}
}/* margin间距 */
$margin: 40;
@for $i from 0 through $margin {.ma-#{$i} {margin: #{$i * 2}rpx;}.mtb-#{$i} {margin-top: #{$i * 2}rpx;margin-bottom: #{$i * 2}rpx;}.mlr-#{$i} {margin-left: #{$i * 2}rpx;margin-right: #{$i * 2}rpx;}.mt-#{$i} {margin-top: #{$i * 2}rpx;}.mb-#{$i} {margin-bottom: #{$i * 2}rpx;}.ml-#{$i} {margin-left: #{$i * 2}rpx;}.mr-#{$i} {margin-right: #{$i * 2}rpx;}
}/* padding间距 */
$padding: 40;
@for $i from 0 through $padding {.pa-#{$i} {padding: #{$i * 2}rpx;}.ptb-#{$i} {padding-top: #{$i * 2}rpx;padding-bottom: #{$i * 2}rpx;}.plr-#{$i} {padding-left: #{$i * 2}rpx;padding-right: #{$i * 2}rpx;}.pt-#{$i} {padding-top: #{$i * 2}rpx;}.pb-#{$i} {padding-bottom: #{$i * 2}rpx;}.pl-#{$i} {padding-left: #{$i * 2}rpx;}.pr-#{$i} {padding-right: #{$i * 2}rpx;}
}/* 文本规定行数超出... */
$line: 5;
@for $i from 1 through $line {.text-line-#{$i} {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: #{$i};line-clamp: #{$i}; // 添加标准属性以增加兼容性-webkit-box-orient: vertical;// word-break: break-word;word-break: break-all;overflow-wrap: break-word;word-wrap: break-word;}
}