SCSS 常用样式写法集合

$white: #ffffff;
$primary: #fa4427;
$secondary: #fe8800;

$theme-color-primary: $primary; // 主色
$theme-color-secondary: $secondary; // 副色

$text-black: #222222; // 文本主色
$text-gray: #656565; //
$text-white: $white; // 白色

$background-color: #f5f5f5;
$border-color: #e0e0e0;

// flex 样式
.z-w-100 {
  width: 100%;
}

.z-h-100 {
  height: 100%;
}

// flex 布局
.z-flex {
  display: flex;
  align-items: center;
}

.z-flex-1 {
  flex: 1;
}

.z-flex-wrap {
    flex-wrap: wrap;
}

.z-col-start {
    display: flex;
    align-items: flex-start;
}

.z-col-end {
    display: flex;
    align-items: flex-end;
}

.z-col-base {
    display: flex;
    align-items: baseline;
}

.z-row-start {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.z-row-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.z-row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.z-row-around {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.z-row-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.z-row-left {
    display: flex;
    align-items: center;
    justify-content: left;
}

.z-row-right {
    display: flex;
    justify-content: right;
}

.z-flex-column {
    display: flex;
    flex-direction: column;
}

.z-flex-wrap {
    display: flex;
    flex-wrap: wrap;
}

// text overflow
.text-ellipsis {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@for $i from 1 through 4 {
  .z-line-#{$i} {
    display: -webkit-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-line-clamp: $i;
    -webkit-box-orient: vertical;
  }
}

// 字体 px
$miz-size: 10;
$max-size: 50;
@for $i from $miz-size through $max-size {
  .z-font-#{$i} {
    font-size: #{$i} !important;
  }
}

// 字体色
$colors: (
  "primary": $primary,
  "secondary": $secondary,
  "black": $text-black,
  "white": $text-white,
  "gray": $text-gray,
);
@each $colorKey, $color in $colors {
  .z-color-#{$colorKey} {
    color: $color !important;
  }

  .z-bg-#{$colorKey} {
    color: $color !important;
  }
}

// 文本布局
@each $var in (left, center, right) {
  .z-text-#{$var} {
    text-align: $var !important;
  }
}

// 边框
@each $dir in (top, right, bottom, left) {
  .z-border-#{$dir} {
    border-#{$dir}: 1px solid $border-color;
  }
}

// 边距 px
$miz-mp-size: 1;
$max-mp-size: 50;
@for $i from $miz-mp-size through $max-mp-size {
  .z-m-#{$i} {
    margin: #{$i}px !important;
  }

  .z-p-#{$i} {
    margin: #{$i}px !important;
  }
}

@for $i from $miz-mp-size through $max-mp-size {
  @each $dir in (t, r, b, l) {
    .z-m-#{$dir}-#{$i} {
      @if $dir == t {
        margin-top: #{$i}px !important;
      } @else if $dir == r {
        margin-right: #{$i}px !important;
      } @else if $dir == b {
        margin-bottom: #{$i}px !important;
      } @else {
        margin-left: #{$i}px !important;
      }
    }
    .z-p-#{$dir}-#{$i} {
      @if $dir == t {
        padding-top: #{$i}px !important;
      } @else if $dir == r {
        padding-right: #{$i}px !important;
      } @else if $dir == b {
        padding-bottom: #{$i}px !important;
      } @else {
        padding-left: #{$i}px !important;
      }
    }
  }
}