less 日常使用技巧

大屏页面常用计算函数

@designWidth: 1920;
@designHeight: 1080;
@mainColor: #87cafb;
.vw(@name, @px) {
  @{name}: (@px / @designWidth) * 100vw;
}

.vh(@name, @px) {
  @{name}: (@px / @designHeight) * 100vh;
}

.font(@px) {
  font-size: (@px / @designWidth) * 100vw;
}


.box {
  .vw(padding-left, 30);
  .vw(padding-right, 30);
  .vh(padding-top, 20);
  .vh(padding-bottom, 20);
  .vh(margin-bottom, 28);
  .font(20);
}

手机端常用函数

@base: 750 / 720 * 0.01;
.px2rem(@name, @px) {
     @{name}: @px * @base * 1rem;
}

.box{
  .px2rem(margin-top, 250);
}

常用技巧

循环生成背景图片

.loop(@counter) when (@counter<=4) {
    .loop(@counter+1);
    div:nth-of-type(@{counter}) {
        @imgUrl: "../img/@{counter}.png";
        background-image:url("@{imgUrl}");
    }
}
.loop(1);