通用的 web app 原子类样式

grid.scss

.flex {
  display: flex;
}

.row {
  position: relative;
  height: auto;
  margin-right: 0;
  margin-left: 0;
  zoom: 1;
  display: block;
  box-sizing: border-box;
  &::before {
    display: table;
    content: '';
  }
  &::after {
    clear: both;
  }

  .col {
    display: block;
    box-sizing: border-box;
    flex: 0 0 auto;
    float: left;
  }

  @for $i from 1 through 24 {
    .col-#{$i} {
      width: #{percentage($i/24)};
    }
  }
}

@for $i from 1 through 10 {
  .flex-#{$i} {
    flex: $i;
  }
}

$flexDirections: inherit initial row row-reverse unset column column-reverse;

@each $direction in $flexDirections {
  .flex-#{$direction} {
    flex-direction: $direction;
  }
}

// $align: baseline center flex-end flex-start left right self-start self-end;
// @for $i from 1 through 10 {
//   .flex-#{$i} {
//     flex: $i;
//   }
// }

$Directions: top right bottom left;

$maps: (
  'margin': 'm',
  'padding': 'p',
  'border': 'b',
  '': ''
);

$directionMap: (
  'top': 't',
  'right': 'r',
  'bottom': 'b',
  'left': 'l'
);

@each $property, $short in $maps {
  @each $name, $shortDirection in $directionMap {
    @for $i from 1 through 32 {
      @if $i % 2 == 0 {
        .#{$short}#{$shortDirection}-#{$i} {
          @if $property != '' {
            #{$property}-#{$name}: $i * 2rpx;
          } @else {
            #{$name}: $i * 2rpx;
          }
        }
      }
    }
  }
}

// border-radius
@for $i from 1 through 32 {
  @if $i % 2 == 0 {
    .radius-#{$i} {
      border-radius: $i * 2rpx;
    }
  }
}

// width & height
@for $i from 1 through 200 {
  @if $i % 2 == 0 {
    .w-#{$i} {
      width: $i * 2rpx;
    }
    .h-#{$i} {
      height: $i * 2rpx;
    }
  }
}

// width & height percent
@for $i from 1 through 100 {
  .w-#{$i}p {
    width: #{percentage($i/100)};
  }
  .h-#{$i}p {
    height: #{percentage($i/100)};
  }
}

$overflows: auto hidden inherit initial overlay scroll unset visible;
$overflowsDirections: 'anchor' 'wrap' 'x' 'y' '';

@each $direction in $overflowsDirections {
  @each $v in $overflows {
    @if $direction != '' {
      .of-#{$direction}-#{$v} {
        overflow: $v;
      }
    } @else {
      .of-#{$v} {
        overflow: $v;
      }
    }
  }
}

$textDirections: left right center;

@each $direction in $textDirections {
  .text-#{$direction} {
    text-align: $direction;
  }
}

@for $i from 1 through 24 {
  .f-#{$i} {
    font-size: $i * 2rpx;
  }
}