合理的运用scss的for循环可以极大程度上减少代码冗余 比如宽高、内外边距

一般会在src下新建style文件夹 里面再建index.scss 在里面写scss的样式配置

1、for循环 through包含结束值 to不包含结束值

@for $x from 1 through 100 可传1-100的值

@for $x from 1 to 100 可传1-99的值

@for $x from 1 through 100 {
  // 配置宽度 小程序中常用 $x*1rpx
  .w-#{$x}{
    width: $x*1px;
  } 
  // 外边距
  .m-#{$x}{
    margin: $x*1px;
  }
}

// 使用（宽为50px 外边距为20px）
<img src="xxx" class="w-50 m-20"/>

注意：结束值不要太大 否则scss循环次数非常大 会导致项目卡顿

2、each循环 用于数组中的映射

$xxx:red,bule,yellow; @each $x in $xxx{}

$colorArr: red,blue,yellow;

// 传入值只能是colorArr中的一项
@each $colorItem in $colorArr{
  .bgc-#{colorItem}{
    background-color: $colorItem;
  }
}

// 使用 红色字体
<span class="bgc-red">123</span>

分享一下 我在小程序中常用的scssfor循环的公共样式 可以直接复制到项目中

@for $a from 1 through 200 {
  // 宽
  .w-#{$a} {
    width: $a*1rpx;
  }
  // 高
  .h-#{$a} {
    height: $a*1rpx;
  }
  // 内边距
  .p-#{$a} {
    padding: $a*1rpx;
  }
  // 上内边距
  .pt-#{$a} {
    padding-top: $a*1rpx;
  }
  // 下内边距
  .pb-#{$a} {
    padding-bottom: $a*1rpx;
  }
  // 右内边距
  .pr-#{$a} {
    padding-right: $a*1rpx;
  }
  // 左内边距
  .pl-#{$a} {
    padding-left: $a*1rpx;
  }
  // 外边距
  .m-#{$a} {
    margin: $a*1rpx;
  }
  // 上外边距
  .mt-#{$a} {
    margin-top: $a*1rpx;
  }
  // 下外边距
  .mb-#{$a} {
    margin-bottom: $a*1rpx;
  }
  // 右外边距
  .mr-#{$a} {
    margin-right: $a*1rpx;
  }
  // 左外边距
  .ml-#{$a} {
    margin-left: $a*1rpx;
  }
}