我的常用SCSS样式库

15 阅读1分钟
$prefix: fuck;

// 字体
@for $i from 12 through 64 {
  .#{$prefix}-fs-#{$i} {
    font-size: #{$i}px;
  }
}

// 内边距
@for $i from 4 through 64 {
  .#{$prefix}-pt-#{$i} {
    padding-top: #{$i}px;
  }
  .#{$prefix}-pl-#{$i} {
    padding-left: #{$i}px;
  }
  .#{$prefix}-pr-#{$i} {
    padding-right: #{$i}px;
  }
  .#{$prefix}-pb-#{$i} {
    padding-bottom: #{$i}px;
  }

  .#{$prefix}-p-vertical-#{$i} {
    padding-top: #{$i}px;
    padding-bottom: #{$i}px;
  }

  .#{$prefix}-p-horizontal-#{$i} {
    padding-left: #{$i}px;
    padding-right: #{$i}px;
  }

  .#{$prefix}-p-all-#{$i} {
    padding: #{$i}px;
  }
}

// 外边距
@for $i from 4 through 64 {
  .#{$prefix}-mt-#{$i} {
    margin-top: #{$i}px;
  }
  .#{$prefix}-ml-#{$i} {
    margin-left: #{$i}px;
  }
  .#{$prefix}-mr-#{$i} {
    margin-right: #{$i}px;
  }
  .#{$prefix}-mb-#{$i} {
    margin-bottom: #{$i}px;
  }
  .#{$prefix}-m-vertical-#{$i} {
    margin-top: #{$i}px;
    margin-bottom: #{$i}px;
  }

  .#{$prefix}-m-horizontal-#{$i} {
    margin-left: #{$i}px;
    margin-right: #{$i}px;
  }

  .#{$prefix}-m-all-#{$i} {
    margin: #{$i}px;
  }
}

// 圆角
@for $i from 4 through 64 {
  // 左上
  .#{$prefix}-radius-lt-#{$i} {
    border-radius: #{$i}px 0 0 0;
  }
  //  右上
  .#{$prefix}-radius-rt-#{$i} {
    border-radius: 0 #{$i}px 0 0;
  }
  // 左下
  .#{$prefix}-radius-lb-#{$i} {
    border-radius: 0 0 0 #{$i}px;
  }
  // 右下
  .#{$prefix}-radius-rb-#{$i} {
    border-radius: 0 0 #{$i}px 0;
  }
  // 左
  .#{$prefix}-radius-ltb-#{$i} {
    border-radius: #{$i}px 0 0 #{$i}px;
  }
  // 右
  .#{$prefix}-radius-rtb-#{$i} {
    border-radius: 0 #{$i}px #{$i}px 0;
  }
  // 上
  .#{$prefix}-radius-lrt-#{$i} {
    border-radius: #{$i}px #{$i}px 0 0;
  }
  // 下
  .#{$prefix}-radius-lrb-#{$i} {
    border-radius: 0 0 #{$i}px #{$i}px;
  }
  // 左对角
  .#{$prefix}-radius-ltrb-#{$i} {
    border-radius: #{$i}px 0 #{$i}px 0;
  }
  // 左对角
  .#{$prefix}-radius-rtlb-#{$i} {
    border-radius: 0 #{$i}px 0 #{$i}px;
  }
  // 全圆角
  .#{$prefix}-radius-#{$i} {
    border-radius: #{$i}px;
  }
}

// 文字颜色
@each $key, $color in (primary, #009745), (warn, #ffb200), (default, #6d6d6d) {
  .#{$key}-color {
    color: #{$color};
  }
}

// 背景颜色
@each $key, $color in (primary, #009745), (warn, #ffb200), (default, #6d6d6d) {
  .#{$key}-background-color {
    background-color: #{$color};
  }
}

// 背景色 0.16透明
@each $key, $color in (primary, #009745), (warn, #ffb200), (default, #6d6d6d) {
  .#{$key}-background-alpha {
    background-color: rgba($color, 0.16);
  }
}

// 背景色0.16透明+文本颜色
@each $key, $color in (primary, #009745), (warn, #ffb200), (default, #6d6d6d) {
  .#{$key}-background-alpha-color {
    color: #{$color};
    background-color: rgba($color, 0.16);
  }
}

// 背景色0.16透明+文本颜色+边框
@each $key, $color in (primary, #009745), (warn, #ffb200), (default, #6d6d6d) {
  .#{$key}-background-alpha-border-color {
    color: #{$color};
    background-color: rgba($color, 0.16);
    border: 1px solid #{$color};
  }
}

// 二宫格
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

// 四宫格
.grid-4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10px;
}

// 5宫格
.grid-5 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 10px;
}

// 十宫格
.grid-10 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 10px;
}

// 文字居中
.text-align {
  text-align: center;
}

// flex布局
.flex-center-start {
  display: flex;
  justify-content: center;
  align-items: start;
}
.flex-start-center {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.flex-start-start {
  display: flex;
  justify-content: flex-start;
  align-items: start;
}
.flex-end-center {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.flex-space-between-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wrap {
  flex-wrap: wrap;
}

// 切割块
.overflow {
  overflow: hidden;
}