@main-color: #1E9FFF;
@main-color2: #1E9FFF99;
:root{
    --main-color: @main-color;
    --main-color2: @main-color2;
}

//主题颜色
.lf-bg-color{background: var(--main-color);}
.lf-color{color: var(--main-color);}
.lf-bg-color2{background: var(--main-color2);}
.lf-color2{color: var(--main-color2);}

.for-loop(@i,@class-name,@property,@unit) when (@i > 0) {
  // 应用样式
  .@{class-name}-@{i} {
    @{property}: ~"@{i}@{unit}";
  }
  // 递归调用，继续遍历
  .for-loop(@i - 1, @class-name, @property, @unit);
}


// 调用for循环，并传递类名和属性名
.for-loop(50, lf-border-r, border-radius, px);
.lf-border-r-9999{border-radius:9999px}

//宽度
.for-loop(1200, lf-width, width, px);
.lf-width-auto{width: auto;}
.lf-width-max{width: 100%;}
.lf-width-fit{width: fit-content;}
.lf-width-flex{flex: 1;}

//外边距
.lf-margin-auto{margin: auto;}
.for-loop(80, lf-margin, margin, px);
.for-loop(80, lf-mt, margin-top, px);
.for-loop(80, lf-mr, margin-right, px);
.for-loop(80, lf-mb, margin-bottom, px);
.for-loop(80, lf-ml, margin-left, px);

//内边距
.for-loop(80, lf-padding, padding, px);
.for-loop(80, lf-pt, padding-top, px);
.for-loop(80, lf-pr, padding-right, px);
.for-loop(80, lf-pb, padding-bottom, px);
.for-loop(80, lf-pl, padding-left, px);

//overflow
.lf-ov-v{overflow: visible;}
.lf-ov-h{overflow: hidden;}
.lf-ov-auto{overflow: auto;}

.text-sizes(@start, @end, @step, @class-name, @property, @unit) when (@start <= @end) {
    // 定义类选择器
    .@{class-name}-@{start} {
        @{property}: unit(@start, @unit);
    }
    // 递归调用，继续遍历
    .text-sizes(@start + @step, @end, @step, @class-name, @property, @unit);
}
  
// 定义字体大小范围
@start: 10;
@end: 60;
@step: 2;
// 调用宏循环生成样式
.text-sizes(@start, @end, @step, lf-text-s, font-size, px);

//弹性布局
.lf-flex{display: flex;}
.lf-flex-wrap{flex-wrap: wrap;}
.lf-flex-sp{justify-content: space-between;}
.lf-flex-col{flex-direction: column;}
.lf-flex-center{display: flex;align-items: center; justify-content: center;}
.lf-flex-column-start{align-items: flex-start;}
.lf-flex-column-end{align-items: flex-end;}
.lf-flex-row-start{justify-content: flex-start;}
.lf-flex-row-end{justify-content: flex-end;}
.for-loop(80, lf-gap, gap, px);

//定位
.lf-left-0{left: 0;}
.lf-top-0{top: 0;}
.lf-left-0{left: 0;}
.lf-right-0{right: 0;}
.lf-left-auto{left: auto;}
.lf-right-auto{right: auto;}
.lf-top-auto{top: auto;}
.lf-bottom-auto{bottom:auto;}
.lf-z-index-0{z-index: 0;}
.for-loop(80,lf-z-index, z-index, '');