关于scss手动遍历生成类名

1、自动生成宽度类名

$width-name:300,100;
@each $name in $width-name {
  .w#{$name}{
    width:$name + px;
  }
};
//以上代码将会生成

.w300{
    width:300px;  
};
.w100{
    width:100px;  
}

复制

2、自动生成间距类名

$margin-name:(
  mt:(16,24,10),
  mb:(16),
  ml:(16,18),
  mr:24
);
@each $name,$value in $margin-name{
  @if type-of($value) == list{
    @each $val in $value{
      @if $name == 'mt'{
        .#{$name}#{$val}{
          margin-top:$val + px;
        }
      }@else if $name == 'mb' {
        .#{$name}#{$val}{
          margin-bottom:$val + px;
        }
      }@else if $name == 'ml' {
        .#{$name}#{$val}{
          margin-left:$val + px;
        }
      }@else{
        .#{$name}#{$val}{
          margin-right:$val + px;
        }
      }
    }
  }@else{
    @if $name == 'mt'{
      .#{$name}#{$value}{
        margin-top:$value + px;
      }
    }@else if $name == 'mb' {
      .#{$name}#{$value}{
        margin-bottom:$value + px;
      }
    }@else if $name == 'ml' {
      .#{$name}#{$value}{
        margin-left:$value + px;
      }
    }@else{
      .#{$name}#{$value}{
        margin-right:$value + px;
      }
    }
  }
}
//太多了，截图了一部分效果图