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