原生小程序如何使用css预处理器 + 定义全局样式

bug爱好者2025-07-21 9:43

在开发原生小程序的时候，会有很多公共页面和公共样式，作为一个专业前端，必须要对公共的样式，和写法进行抽离和提取，这样不仅能够提升代码的复用性，也能够提升开发效率，废话不多说，直接上代码。。。

css 复制代码 
page {
  background-color: #f4f5f9;
  // 颜色变量
  --primary-color: #00a7b1;
  --error-color: #ed3b3b;
  --warning-color: #fa823b;
  --background-color: #f4f5f7;
  --background-color-light-1: #f4f5f9;
  --border-color: #e5e6eb;
  --green-color: #02ba4b;
  --text-color-light-1: #303133;
  --text-color-light-3: #a1abb9;
  --color-primary-blue: #165dff;
  // fill
  --color-fill-1: #c9cdd4;
  --color-fill-2: #e5e6eb;
  --color-fill-3: #f2f3f5;
  --color-fill-4: #f7f8fa;
  --color-fill-white: #ffffff;
  // text
  --color-text-1: #1d2129;
  --color-text-2: #4e5969;
  --color-text-3: #86909c;
  --color-text-4: #c9cdd4;
  --color-text-white: #ffffff;
  --color-text-Prompt: #fc8800;
  --color-text-Link: #0077fa;
  --color-text-important: #f53f3f;
  // border
  --color-border-deep: #e5e6eb;
  --color-border-shallow: #f2f3f5;
  // danger
  --color-danger-press: #cb2634;
  --color-danger-normal: #f53f3f;
  --color-danger-disable: #fbaca3;
  --color-danger-disabletext: #fdcdc5;
  --color-danger-bg: #ffece8;
  // warning
  --color-warning-press: #d26700;
  --color-warning-normal: #fc8800;
  --color-warning-disable: #fdc165;
  --color-warning-disabletext: #feeecc;
  --color-warning-bg: #fff8ea;
  // success
  --color-success-press: #30953b;
  --color-success-normal: #3bb346;
  --color-success-disable: #7dd182;
  --color-success-disabletext: #d0f0d1;
  --color-success-bg: #ecf7ec;
}

// 省略号
.myb-ellipsis-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}

/* 文本样式 */
// 横穿线
.text-through {
  text-decoration: line-through;
}

// 下划线
.text-underline {
  text-decoration: underline;
}

// 清除浮动
.clear-both {
  clear: both;
  overflow: hidden;
}

// 省略号
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 保留换行符，合并多个空格为一
.text-preline {
  white-space: pre-line;
}

// 保留换行符，原样输出
.text-prewrap {
  white-space: pre-wrap;
}

// 不换行
.text-nowrap {
  white-space: nowrap;
}

// 换行
.text-break {
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
}

// 悬浮
.fl {
  float: left !important;
}

.fr {
  float: right !important;
}

// 分配空间
@for $i from 1 through 10 {
  .flex#{$i} {
    flex: $i !important;
  }
}

$main-axis: (
  s: flex-start,
  c: center,
  b: space-between,
  a: space-around,
  e: flex-end,
);

$cross-axis: (
  s: flex-start,
  c: center,
  e: flex-end,
  b: baseline,
);

@each $mk, $mv in $main-axis {
  @each $ck, $cv in $cross-axis {
    .row-#{$mk}-#{$ck} {
      display: flex;
      flex-direction: row;
      justify-content: $mv;
      align-items: $cv;
    }
    .col-#{$mk}-#{$ck} {
      display: flex;
      flex-direction: column;
      justify-content: $mv;
      align-items: $cv;
    }
  }
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

// flex布局
.box {
  display: flex;

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

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

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

  &.content-center {
    justify-content: center;
  }

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

  &.align-items-baseline {
    align-items: baseline;
  }

  &.align-items-center {
    align-items: center;
  }

  &.self-start {
    align-items: self-start;
  }

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

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

  &.column {
    flex-direction: column;
  }

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

/* 边框尺寸 */
$borderWidth: 0, 1, 2;
@each $size in $borderWidth {
  .b#{$size} {
    border-width: $size * 1px !important;
  }
  .bt#{$size} {
    border-top-width: $size * 1px !important;
  }
  .br#{$size} {
    border-right-width: $size * 1px !important;
  }
  .bb#{$size} {
    border-bottom-width: $size * 1px !important;
  }
  .bl#{$size} {
    border-left-width: $size * 1px !important;
  }
}

$colors: (

  "999": #999,
  "ccc": #ccc,
  "ddd": #ddd,
  "fff": #fff,
  "F53F3F": #f53f3f,
  "02BA4B": #02BA4B,
  "f0f9eb": #f0f9eb,
  "606266": #606266,
  "86909C": #86909c,
  "d9d9d9": #d9d9d9,
  "071845": #071845,
  "8d9099": #8d9099,
  "83878E": #83878e,
  "4e5969": #4e5969,
  "A1ABB9": #a1abb9,
  "E5E6EB": #e5e6eb,
  "ebedf0": #ebedf0,
  "F7F8FC": #f7f8fc,
  "FDEBEB": #fdebeb,
  "ED3B3B": #ed3b3b,
  "c9c9c9": #c9c9c9,
  "FFF3EB": #fff3eb,
  "EBF7EC": #ebf7ec,
  "3BB346": #3bb346,
  "F4F5F7": #f4f5f7,
  "C9CDD4": #c9cdd4,
  "FC8800": #fc8800,
  "1D2129": #1d2129,
  "0077FA": #0077fa,
  "F2F3F5": #f2f3f5,
  "C2C5CC": #c2c5cc,



  "F7F8FA": #f7f8fa,
  "0C50E9": #0c50e9,
  "165DFF":#165DFF,
  "01C87F":#01C87F,
  "5AC276":#5AC276,
  "F7F9FC":#F7F9FC,
  "ededed":#ededed,
  "1D2129FF":#1D2129FF,
  "DD4841":#DD4841,
  "1C1F2314": #1C1F2314,
  "eaf4fe":#eaf4fe,
  "2b55cb":#2b55cb,
  "FFD36D":#FFD36D,
  "ffece8":#ffece8,
  "0ab24c":#0ab24c,
  "f4f7fc": #f4f7fc,
  "3BB346FF": #3BB346FF,
  "F1F6FDFF": #F1F6FDFF,
  "0077FAFF":#0077FAFF,
  "FC8800FF": #FC8800FF,
  "4E5969FF":#4E5969FF,
  "C9CDD4FF":#C9CDD4FF,
  "86909CFF":#86909CFF,
  "E5E6EBFF": #E5E6EBFF,
  "5AC276FF":#5AC276FF,
  "DD4841FF":#DD4841FF,
  "E7E7E7FF": #E7E7E7FF,
  "1c1f2314": #1c1f2314,
  "FFFFFFFF": #FFFFFFFF,
  "transparent": transparent,
  "textColor1": var(--color-text-1),
  "textColor2": var(--color-text-2),
  "textColor3": var(--color-text-3),
  "textColor4": var(--color-text-4),
  "303133": #303133,

  "000-a85": rgba(0, 0, 0, 0.85),
  "green": #02ba4b,
  "red": #ed3b3b,
  "black": var(--text-color-light-1),
  "warning-bg":var(--color-warning-bg),
  "primary": var(--color-primary-blue),
  "background-color": var(--background-color),
  "theme": var(--el-color-primary),
  "fff-a65": rgba(255, 255, 255, 0.65), 
);

// 边框颜色
@each $colorName, $colorMap in $colors {
  .bc#{$colorName} {
    border-color: $colorMap !important;
    border-style: solid;
  }

  // 上边线
  .bt1pxs#{$colorName} {
    border-top: 1rpx solid $colorMap!important;
  }
  // 右边线
  .br1pxs#{$colorName} {
    border-right: 1rpx solid $colorMap!important;
  }
  // 边框1px线
  .bb1pxs#{$colorName} {
    border: 1rpx solid $colorMap!important;
  }
  // 字体颜色
  .c#{$colorName} {
    color: $colorMap !important;
  }
  // 1rpx边框线
  .bbc#{$colorName} {
    border-bottom: 1rpx solid $colorMap;
  }
  // 2rpx边框线
  .bb2c#{$colorName} {
    border: 2rpx solid $colorMap;
  }

  // 背景颜色
  .bg-c#{$colorName} {
    background-color: $colorMap !important;
  }

  .bb1pxc {
    border-bottom: 1rpx solid $colorMap ;
    transform: scaleY(0.5); /* 缩放为 1px */
  }
}


/* width百分比 */
$wpers: 20, 25, 30, 33, 40, 50, 66, 75, 80, 100;
@each $size in $wpers {
  .w#{$size}per {
    width: $size * 1% !important;
  }
  .h#{$size}per {
    width: $size * 1% !important;
  }
}



// 底部1pxE5E6EBFF颜色线
.bb-1E5E6EBFF {
  border-bottom: 1px solid #e5e6ebff;
}

/* height百分比 */
$hpers: 50;
@each $size in $hpers {
  .br#{$size}per {
    border-radius: $size * 1% !important;
  }
}

/* height百分比 */
$hpers: 33, 66, 50, 100;
@each $size in $hpers {
  .h#{$size}per {
    height: $size * 1% !important;
  }
}

/* 显示方式 */
$displays: block, inline-block, flex, none;
@each $size in $displays {
  .display-#{$size} {
    display: $size !important;
  }
}




/* 字体粗细 */
$weights: 500, 600, bold;
@each $size in $weights {
  .fw-#{$size} {
    font-weight: $size !important;
  }
}

/* 文本位置 */
$textAlign: center, left, right;
@each $size in $textAlign {
  .text-#{$size} {
    text-align: $size !important;
  }
}

/* 字体-常规字体 */
@for $i from 1 through 50 {
  .f#{$i} {
    font-size: (1rpx * $i);
  }
}

/* 滚动条 */
$overflow: auto, hidden, scroll, inherit;
@each $name in $overflow {
  .overflow-#{$name} {
    overflow: $name !important;
  }
}

// 底部定位
.bottom-button-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  font-size: 32rpx;
  padding-bottom: constant(safe-area-inset-bottom); /* 兼容旧版本 */
  padding-bottom: env(safe-area-inset-bottom); /* 标准写法 */
  background-color: #fff;
  text-align: center;
  z-index: 10;
  border-top: 1px solid var(--border-color);
  padding-bottom: 16rpx;
}
.haHeaderBtncard {
    .header {
        font-size: 27rpx;
        border-bottom: 1px solid #E5E6EB;
        position: relative;
        .iconLeft {
            width: 8rpx;
            height: 32rpx;
            background-color: #165DFF;
            position: absolute;
            left: 0;
            top: 19rpx;
            border-radius: 4rpx;
        }
    }
}

/* 公共卡片样式 */
.common-card {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 16rpx;
  margin: 0rpx 32rpx;
  width: 686rpx;
  /* 标题样式 */
  .card-title {
    color: #303133;
    font-size: 32rpx;
    line-height: 44rpx;
    padding: 12rpx 0;
    font-weight: bold;
    margin: 16rpx 24rpx 0;
  }

  .card-value-red {
    color: #fa823b;
  }
}

/* 行样式 */
.card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28rpx;
  margin: 0 24rpx;
  line-height: 42rpx;
  height: 66rpx;

  /* 左侧文字样式 */
  .card-label {
    color: var(--color-text-3);
    white-space: nowrap;
    margin-right: 16rpx;
  }

  /* 右侧文字样式 */
  .card-value-2 {
    color: var(--color-text-2);
  }

  /* 右侧文字样式 */
  .card-value {
    color: var(--color-text-1);
  }
}

/* 行样式 */
.commmon-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 30rpx;
  line-height: 42rpx;
  margin: 0 0rpx;
  width: 638rpx;
  height: 66rpx;
}

/* 左侧文字样式 */
.commmon-card-label {
  color: #83878e;
}

/* 右侧文字样式 */
.commmon-card-value {
  color: #303133;
}

// 背景为白色圆角的卡片表单
.m24-card-box {
  border-radius: 16rpx;
  margin: 20rpx 24rpx;
  background-color: #fff;
}

// 表单上传图片带提示
.form-upload-tip {
  .lable-box {
    height: 104rpx;
    .tip {
      font-size: 24rpx;
      color: #86909CFF;
    }
  }
  .upload-box {
    margin-top: -20rpx;
  }
}

// 竖线标题
.line-title {
  position: relative;
  height: 40rpx;
  font-size: 28rpx;
  line-height: 40rpx;
  color: #86909C;
  font-weight: 600;
  padding-left: 24rpx;

  &::after {
    position: absolute;
    top: 2rpx;
    left: 0;
    content: "";
    display: inline-block;
    width: 8rpx;
    height: 36rpx;
    border-radius: 4px;
    background-color: #165dff;
  }
}

/* 加载更多样式 */
.loading-more {
  text-align: center;
  color: #999;
  font-size: 24rpx;
  padding: 30rpx;
}

// 自定义tabs标签
.custom-tabs {
  background-color: #f2f3f5;
  border-radius: 16rpx;
  padding: 4rpx;

  span,
  text,
  view {
    font-size: 26rpx;
    color: #86909c;
    padding: 8rpx 24rpx;
    border-radius: 12px;

    &.active {
      color: #1d2129;
      background-color: #fff;
    }
  }
}

.van-field__placeholder {
    font-size: 28rpx;
  }

// 宽高都为48图标
.w48-img {
  width: 48rpx;
  height: 48rpx;
}

// 中间浮动按钮
.add-icon--border-btn {
  height: 88rpx;
  color: #0077FAFF;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  margin: 16rpx 0;
  border-radius: 16rpx;
  justify-content: center;
  background-color: #FFFFFFFF;
  cursor: pointer;
  van-icon {
    margin-right: 16rpx;
    color: #0077FAFF!important;
  }
}

// 自定义tabs标签
.wl-tabs {
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 4rpx;
    padding-bottom: 6rpx;
    text {
      font-size: 26rpx;
      color: #86909c;
      padding: 8rpx 24rpx;
      border-radius: 12px;
  
      &.active {
        color: #1d2129;
        background-color: #f7f8fa;
      }
    }
  }
// 公共表格样式
.table-list {
  border-top: 1px solid var(--border---color-border-deep, #e5e6eb);
  border-bottom: 1px solid var(--border---color-border-deep, #e5e6eb);
  border-left: 1px solid var(--border---color-border-deep, #e5e6eb);
  text-align: center;
  .table-th {
    display: flex;
    & > view {
      flex: 1;
      font-size: 24rpx;
      color: #86909c;
      padding: 16rpx;
      background-color: #f2f3f5;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: break-all;
      border-right: 1px solid var(--border---color-border-deep, #e5e6eb);
    }
  }
  .table-tr {
    display: flex;
    & > view {
      flex: 1;
      font-size: 24rpx;
      padding: 16rpx;
      color: #1d2129;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: break-all;
      border-right: 1px solid var(--border---color-border-deep, #e5e6eb);
      border-top: 1px solid var(--border---color-border-deep, #e5e6eb);
    }
  }
}

/* 边框尺寸 */ 
$bigWidth: 200,210,224,225,240,244,250,300,316,320,340,350,360,400,450,460,480,500,520,550,554,590,600,610,638,640,650,654,686,688,700,702,750,780;
@each $i in $bigWidth {
  .w#{$i} {
    width: #{$i}rpx !important;
  }
  .h#{$i} {
    height: #{$i}rpx !important;
  }
  .lh#{$i} {
    line-height: #{$i}rpx !important;
  }
}

/* width、height*/
@for $i from 1 through 200 {
  .w#{$i} {
    width: #{$i}rpx !important;
  }
  .h#{$i} {
    height: #{$i}rpx !important;
  }
  .lh#{$i} {
    line-height: #{$i}rpx !important;
  }
}

/* width、height*/
@for $i from 1 through 100 {
  .br#{$i} {
    border-radius: #{$i}rpx !important;
  }
}

$spacing-types: (
  m: margin,
  p: padding,
);

$spacing-directions: (
  t: top,
  r: right,
  b: bottom,
  l: left,
);
$spacing-sizes: 120;
// m1|mb1|mt1|ml1|p1|pr1|...
@each $typekey, $type in $spacing-types {
  @for $i from 0 through $spacing-sizes {
    .#{$typekey}#{$i} {
      #{$type}: #{$i}rpx !important;
    }

    @each $sizekey, $size in $spacing-directions {
      .#{$typekey}#{$sizekey}#{$i} {
        #{$type}-#{$size}: #{$i}rpx !important;
      }
    }
  }
}


$bigWidth2:2,4,8,10,12,16,20,22,24,28,32,36,108;
// m1|mb1|mt1|ml1|p1|pr1|...
@each $typekey, $type in $spacing-types {
  @each $i in $bigWidth2 {
   
    .px#{$i} {
      padding-left: #{$i}rpx !important;
      padding-right: #{$i}rpx !important;
    }
    .py#{$i} {
      padding-top: #{$i}rpx !important;
      padding-bottom: #{$i}rpx !important;
    }
    .mx#{$i} {
      margin-left: #{$i}rpx !important;
      margin-right: #{$i}rpx !important;
    }
    .my#{$i} {
      margin-top: #{$i}rpx !important;
      margin-bottom: #{$i}rpx !important;
    }
    
  }
}

END...

相关推荐
仰望星空的凡人1 分钟前
【JS逆向基础】数据库之mysql
javascript·数据库·python·mysql
小屁孩大帅-杨一凡24 分钟前
如何使用Python将HTML格式的文本转换为Markdown格式？
开发语言·前端·python·html
于慨24 分钟前
uniapp云打包安卓
前端·uni-app
米粒宝的爸爸25 分钟前
【uniapp】使用uviewplus来实现图片上传和图片预览功能
java·前端·uni-app
LaoZhangAI25 分钟前
2025年虚拟信用卡订阅ChatGPT Plus完整教程（含WildCard停运后最新方案）
前端·后端
雪碧聊技术26 分钟前
Uniapp 纯前端台球计分器开发指南：能否上架微信小程序 & 打包成APP？
前端·微信小程序·uni-app·台球计分器
清风细雨_林木木27 分钟前
Vuex 的语法“...mapActions([‘login‘]) ”是用于在组件中映射 Vuex 的 actions 方法
前端·javascript·vue.js
会功夫的李白30 分钟前
Uniapp之自定义图片预览
前端·javascript·uni-app·图片预览
ℳ๓. Sweet1 小时前
【STM32】关于STM32F407写Flash失败问题的解决办法
javascript·stm32·嵌入式硬件
拾光拾趣录1 小时前
script 标签上有那些属性，分别作用是啥？
前端·javascript
热门推荐
01【2025.7.18】更新vscode后所有.vue文件template标签后报红的临时解决办法，Vue - Official 插件3.0.2导致02全球最强模型Grok4，国内已可免费使用！（附教程）03Cursor Claude 模型无法使用的解决方法04KGG转MP3工具|非KGM文件|解密音频05Cursor限制国内用户使用Claude模型？附简单解决方案！06Vue (Official) v3.0.2 新特性 为非类npm环境引入 globalTypesPath 选项07赛博保姆出列！Gemini CLI & Claude Code + Kimi 手把手教程08WPS文档中心及文档中台远程命令执行漏洞09Claude Code 最新版已经支持 Windows 安装使用！102024电赛H题参考方案（+视频演示）——自动行使小车