Scss Snippets

text align

@each $position in left, center, right {
  .align-#{$position} {
    text-align: $position;
  }
}

flex

.flex {
  display: flex;

  &-top {
    align-items: flex-start;
  }

  &-middle {
    align-items: center;
  }

  &-bottom {
    align-items: flex-end;
  }

  &-stretch {
    align-items: stretch;
  }

  &-baseline {
    align-items: baseline;
  }

  &-left {
    justify-content: flex-start;
  }

  &-center {
    justify-content: center;
  }

  &-right {
    justify-content: flex-end;
  }

  &-between {
    justify-content: space-between;
  }

  &-around {
    justify-content: space-around;
  }
}

scss mixin 设置省略号

@mixin set-ellipsis($line: 1) {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
  overflow: hidden;
}

scss mixin 设置斑马纹

@mixin set-striped($odd, $even) {
  &:nth-child(odd) {
    background-color: $odd !important;
  }

  &:nth-child(even) {
    background-color: $even !important;
  }
}