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;
    }
}