less、sass循环使用公共样式

less中的循环

Less 循环 - 简书 参考文献

//字体大小
 .fz(@n, @i: 0) when (@i <= @n) {
    // 外边距
    .fonts@{i} {
      font-size: (@i * 0.01rem);
    }
    .fz(@n, (@i + 1));
  }
  .fz(40);

使用

<div class="black fz30"></div>

  .wh(@n, @i: 0) when (@i <= @n) {
    // 外边距
    .mart@{i} {
      margin-top: (@i * 0.01rem);
    }
    .marb@{i} {
      margin-bottom: (@i * 0.01rem);
    }
    .marl@{i} {
      margin-left: (@i * 0.01rem);
    }
    .marr@{i} {
      margin-right: (@i * 0.01rem);
    }
    .wh(@n, (@i + 1));
  }
  .wh(70);

scss中的循环

@for $i from 5 through 30 {
    .br#{$i} {
        border-radius: #{$i}rpx;;
    }
}

使用

<view class="btn-main flex mt30 mb30"></view>

// 内外边距
@for $i from 1 through 250 {
  .mt#{$i} {
    margin-top: #{$i}rpx;
  }
  .mr#{$i} {
    margin-right: #{$i}rpx;
  }
  .mb#{$i} {
    margin-bottom: #{$i}rpx;
  }
  .ml#{$i} {
    margin-left: #{$i}rpx;
  }
}