.border{border: 1px solid #ddd;}
.color-333{color: #333;}
.color-666{color: #666;}
.color-999{color: #999;}
.color-fff{color: #fff;}
.color-red{color: red;}
.color-green{color: #1ec659;}
.color-24bafc{color: #24bafc;}

//margin,padding
@for $i from 0 through 101{
  .margin-right-#{$i}{
    margin-right: #{$i}px;
  }
  .margin-left-#{$i}{
    margin-left: #{$i}px;
  }
  .margin-top-#{$i}{
    margin-top: #{$i}px;
  }
  .margin-bottom-#{$i}{
    margin-bottom: #{$i}px;
  }
  .margin-#{$i}{
    margin: #{$i}px;
  }
  .padding-#{$i}{
    padding: #{$i}px;
  }
  .padding-right-#{$i}{
    padding-right: #{$i}px;
  }
  .padding-left-#{$i}{
    padding-left: #{$i}px;
  }
  .padding-top-#{$i}{
    padding-top: #{$i}px;
  }
  .padding-bottom-#{$i}{
    padding-bottom: #{$i}px;
  }
}

//margin,padding
@for $i from 0 through 51{
  @for $j from 0 through 51{
    .margin-#{$i}-#{$j}{
      margin: #{$i}px #{$j}px ;
    }
    .padding-#{$i}-#{$j}{
      padding: #{$i}px #{$j}px ;
    }
  }
}

//flex布局
.flex{
  display: flex;
}
@for $j from 1 to 25{
  .flex-#{$j}{
    flex: #{$j};
  }
}
