使用SASS模仿TailwindCSS生成常用CSS样式

最近维护MPX小程序项目发现没有基础样式库，由于MPX版本比较老不兼容tailwind库，用惯了tailwind后，再去css文件里一行行敲样式觉得难受，并且开发效率也不高，于是就想自己写一套和tailwind类似的基础样式，tailwind是js实现的然后通过postcss转换为css，这里我们使用sass来实现

实现颜色类的color.scss

// color.scss
// colors
$defaultColor: (
  primary: #007fff,
  gray: #8a94a6,
  dgray: #0a1f44,
  blue: #007fff,
  yellow: #f07300,
  red: #dd2727,
  green: #0bb07b,
  white: #fff,
  light: #f9f9f9,
  black: #0a1f44,
  line: #f1f2f4,
);

$gray: (
  100: #FCFCFD,
  200: #F8F9FB,
  300: #F1F2F4,
  400: #E1E4E8,
  500: #C9CED6,
  600: #B5BBC6,
  700: #A6AEBC,
  800: #98A1B1,
  900: #8A94A6,
);
$dgray: (
  100: #758196,
  200: #6C798F,
  300: #5D6C84,
  400: #53627C,
  500: #445571,
  600: #364866,
  700: #273A5B,
  800: #182C4F,
  900: #0A1F44,
);
$blue: (
  100: #F5FAFF,
  200: #EBF5FF,
  300: #CCE6FF,
  400: #99CCFF,
  500: #5AACFF,
  600: #007FFF,
  700: #0C66FF,
  800: #0D55CF,
  900: #0A44A5,
);
$green: (
  100: #F7FFFD,
  200: #E9FFF8,
  300: #92ECCF,
  400: #6DDFBA,
  500: #3ED3A3,
  600: #22C993,
  700: #0BB07B,
  800: #00865A,
  900: #006242,
);
$yellow: (
  100: #FFFCF5,
  200: #FFF6E4,
  300: #FFECC7,
  400: #FFDC99,
  500: #FFCA65,
  600: #FFBB38,
  700: #FFAD0D,
  800: #FF8F00,
  900: #F07300,
);
$red: (
  100: #FFF8F8,
  200: #FFEAEA,
  300: #FFC2C2,
  400: #FF8D8D,
  500: #FF5D5D,
  600: #F03D3D,
  700: #DD2727,
  800: #BD0303,
  900: #A50000,
);

$colors: (
  red: $red,
  gray: $gray,
  dgray: $dgray,
  yellow: $yellow,
  green:$green,
  blue:$blue
);

// text-red bg-red
@each $colorKey, $color in $defaultColor {
  .text-#{$colorKey} {
    color: $color;
  }
  .bg-#{$colorKey} {
    background: $color;
  }
}

// text-red-100 bg-red-100 ...
@each $colorKey, $colorDic in $colors {
  @each $index, $color in $colorDic {
    .text-#{$colorKey}-#{$index} {
      color: $color;
    }
    .bg-#{$colorKey}-#{$index} {
      background: $color;
    }
    .border-#{$colorKey}-#{$index} {
      border-color: $color;
    }
  }
}

使用方式：

色系我们没有采用基础色计算出来，所以无法使用颜色值运算 (Color Operations)，sass支持颜色值运算，如果可以计算出来就不用像我上面写那么多变量了

p {
  color: #010203 + #040506;
}
p {
  color: #010203 * 2;
}
p {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

实现其他基础样式tailwind.scss

参考tailwind官方文档实现，从上到下选取一些经常用到样式，并非全部样式

$count: 100;
// Layout
// display
@each $val in (hidden, grid, flex, inline, inline-block, block) {
  .#{$val} {
    display: $val;
  }
}

// top, right, left, bottom
@each $val in (top, right, left, bottom) {
  @for $i from 1 through $count {
    .#{$val} {
      #{$val}: $i;
    }
  }
}

// position
@each $val in (static, fixed, absolute, relative, sticky) {
  .#{$val} {
    position: $val;
  }
}

// z-index
@each $val in (0, 10, 20, 30, auto) {
  .z-#{$val} {
    z-index: $val;
  }
}

.overflow-hidden {
  overflow: hidden;
}
.verflow-scroll {
  overflow: scroll;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-scroll {
  overflow-x: scroll;
}
.overflow-y-scroll {
  overflow-y: scroll;
}

.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}

// Flexbox & Grid
.flex-1 {
  flex: 1 1 0%;
}
.flex-auto {
  flex: 1 1 auto;
}
.flex-initial {
  flex: 0 1 auto;
}
.flex-none {
  flex: none;
}
.grow {
  flex-grow: 1;
}
.grow-0 {
  flex-grow: 0;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}

// justify-content align-content
@each $val in (start, end, center, space-between, space-around, space-evenly) {
  .justify-#{$val} {
    justify-content: $val;
  }
  .content-#{$val} {
    align-content: $val;
  }
}

// justify-content
@each $val in (start, end, center, stretch) {
  .justify-self-#{$val} {
    justify-self: $val;
  }
  .justify-items-#{$val} {
    justify-self: $val;
  }
}
// align-self
@each $val in (flex-start, flex-end, center, stretch, baseline) {
  .self-#{$val} {
    align-self: $val;
  }
  .items-#{$val} {
    align-items: $val;
  }
}

// Spacing
$spacing-types: (
  m: margin,
  p: padding,
);
$spacing-directions: (
  t: top,
  r: right,
  b: bottom,
  l: left,
);
$spacing-base-size: 1px;

/*
 margin padding
 eg: .m-1 .my-1 .mx-1 .mt-1, .mr-1...
 */
@each $typeKey, $type in $spacing-types {
  @for $i from 1 through $count {
    .#{$typeKey}-#{$i} {
      #{$type}: $spacing-base-size * $i;
    }
    .#{$typeKey}x {
      #{$type}-left: $i * $spacing-base-size;
      #{$type}-right: $i * $spacing-base-size;
    }
    .#{$typeKey}x-#{$i} {
      #{$type}-top: $i * $spacing-base-size;
      #{$type}-bottom: $i * $spacing-base-size;
    }
  }

  @each $directionKey, $direction in $spacing-directions {
    @for $i from 1 through $count {
      // .mt-1{margin-top: 0.25rem}
      .#{$typeKey}#{$directionKey}-#{$i} {
        #{$type}-#{$direction}: $i * $spacing-base-size;
      }
    }
  }
}

// sizing
$sizing-types: (
  w: width,
  min-w: min-width,
  max-w: max-width,
  h: height,
  min-h: min-height,
  max-h: max-height,
);

/*
  width, min-width, max-width, height, min-height, max-height
  eg: .w-1 .min-w-1 .max-w-1 w-full ...
 */
@each $typeKey, $type in $sizing-types {
  .#{$typeKey}-full {
    #{$type}: 100%;
  }
  @for $i from 1 through $count {
    .#{$typeKey}-#{$i} {
      #{$type}: $spacing-base-size * $i;
    }
  }
}

// Typography
// font-size line-height
@for $i from 1 through $count {
  .text-#{$i} {
    font-size: #{$i}px;
    line-height: #{$i}px;
  }
  .leading-#{$i} {
    line-height: #{$i}px;
  }
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-ellipsis {
  text-overflow: ellipsis;
}
.text-clip {
  text-overflow: clip;
}

.font-normal {
  font-weight: 400;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.font-bold {
  font-weight: 700;
}

// white-space
@each $val in (pre-wrap, pre-line, pre, nowrap, normal) {
  .whitespace-#{$val} {
    white-space: $val;
  }
}

// vertical-align
@each $val in (super, sub, text-bottom, text-top, bottom, middle, top, baseline)
{
  .align-#{$val} {
    vertical-align: $val;
  }
}

.break-normal {
  overflow-wrap: normal;
  word-break: normal;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}

// text-left text-center text-right
@each $val in (left, center, right) {
  .text-#{$val} {
    text-align: $val;
  }
}

// Borders
@for $i from 1 through $count {
  .rounded-#{$i} {
    border-radius: #{$i}px;
  }
  .border-#{$i} {
    border-width: #{$i}px;
  }
  .border-y-#{$i} {
    border-top-width: #{$i}px;
    border-bottom-width: #{$i}px;
  }
  .border-x-#{$i} {
    border-left-width: #{$i}px;
    border-right-width: #{$i}px;
  }
  .border-t-#{$i} {
    border-top-width: #{$i}px;
  }
  .border-b-#{$i} {
    border-bottom-width: #{$i}px;
  }
  .border-r-#{$i} {
    border-right-width: #{$i}px;
  }
  .border-l-#{$i} {
    border-left-width: #{$i}px;
  }
}

使用方式参考tailwindcss官方文档

上面的很多@each循环其实可以少写几次，不过为了代码可读性没有混在一起写，如果你觉得影响性能可以合并到一起

需注意小程序不支持一些特殊转义字符[ ! .

项目中使用

一顿操作完成，以为可以开心的在项目中使用了，结果一直报错各种方式都无法解决，最后我将sass转为css放在项目中使用了，emmm。。。