最近维护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;
}
}
}
使用方式：
<div class="text-red-100 bg-red-100 border-red-100"> </div>
色系我们没有采用基础色计算出来，所以无法使用颜色值运算 (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。。。
网友评论