@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, '');

.onbull{background-color: var(--main-color);opacity: 1;}