uniapp使用scss仿tailwindcss进行常用样式封装便捷开发小程序或web

最新推荐文章于 2024-06-05 16:54:45 发布
最新推荐文章于 2024-06-05 16:54:45 发布
阅读量308 收藏
点赞数 3
文章标签： 前端 uni-app scss
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42332166/article/details/138215886
版权

小程序版本

如果你开发的是小程序的话,或者包含小程序,就只能选这个版本,如果不包含小程序,更推荐使用H5版本

// 文字粗细
$font-weights: (
  thin: 100,
  extra-light: 200,
  light: 300,
  regular: 400,
  medium: 500,
  semi-bold: 600,
  bold: 700,
  extra-bold: 800,
  black: 900
);

// 文字大小
@for $i from 8 through 25 {
  .font-#{$i} {
    font-size: #{$i}px;
  }
}




@each  $name, $weight in $font-weights {
  .font-#{$name} {
    font-weight: $weight;
  }
}



$aligns: (
  left,
  center,
  right,
  justify
);



// 文字位置
@each $align in $aligns {
  .text-#{$align} {
    text-align: $align;
  }
}



// 颜色
$colors: (
  red: #ff0000,
  darkRed: #d90209,
  green: #00ff00,
  blue: #0000ff,
  black: #000000,
  white: #ffffff,
  gray: #808080,
  lightGray: #e6e6e6,
  orange: #ffA500,
  yellow: #ffff00,
  pink: #ff69b4,
  purple: #800080, 
  brown: #a52a2a,
  cyan: #00ffff,
  lime: #00ff00,
  navy: #000080,
  olive: #808000,
  khaki: #f0e68c,
  salmon: #fa8072,
  coral: #ff7f50,
  gold: #ffd700,
  lavender: #e6e6fa,
  turquoise: #40e0d0,
  peach: #ffdab9,
  orchid: #da70d6,
  crimson: #dc143c,
  forestGreen: #228b22,
  sienna: #a0522d,
  sirocco: #736f6e,
  caputMortuum: #592720,
  zomp: #39a78e,
  paleTurquoise: #afeeee,
  lightSeaGreen: #20b2aa,
  dodgerBlue: #1e90ff,
  mediumSlateBlue: #7b68ee,
  blueViolet: #8a2be2,
  mediumOrchid: #ba55d3,
  thistle: #d8bfd8,
  deepPink: #ff1493,
  hotPink: #ff69b4,
  darkSlateGray: #2f4f4f,
  dimGray: #696969,
  slateBlue: #6a5acd,
  mediumBlue: #0000cd,
  cadetBlue: #5f9ea0,
  mediumAquamarine: #66cdaa,
  darkSeaGreen: #8fbc8f,
  lightGreen: #90ee90,
  springGreen: #00ff7f,
  chartreuse: #7fff00,
  mediumSpringGreen: #00fa9a,
  paleGoldenrod: #eee8aa,
  goldenrod: #daa520,
  sandyBrown: #f4a460,
  peru: #cd853f,
  rosyBrown: #bc8f8f,
  wheat: #f5deb3,
  darkOrange: #ff8c00,
);


// 文字颜色
@each $name, $color in $colors {
  .text-#{$name} {
    color: $color;
  }
}


// 布局
// Flex容器样式
.flex {
  display: flex;
}

// 设置主轴方向
.flex-row {
  flex-direction: row;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-col {
  flex-direction: column;
}

.flex-col-reverse {
  flex-direction: column-reverse;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}


// 垂直居中
.vertical-center {
  display: flex;
  align-items: center; // 垂直居中
}

// 水平居中
.horizontal-center {
  display: flex;
  justify-content: center; // 水平居中
}


// 设置主轴对齐方式
.justify-start {
  justify-content: flex-start;
}

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

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

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

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

// 设置交叉轴对齐方式
.items-start {
  align-items: flex-start;
}

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

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

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

.items-stretch {
  align-items: stretch;
}

.items-spaceAround {
  align-items: space-around;
}

.items-spaceBetween {
  align-items: space-between;
}

// 设置子项在交叉轴上的对齐方式
.align-self-auto {
  align-self: auto;
}

.align-self-flex-start {
  align-self: flex-start;
}

.align-self-flex-end {
  align-self: flex-end;
}

.align-self-center {
  align-self: center;
}

.align-self-baseline {
  align-self: baseline;
}

.align-self-stretch {
  align-self: stretch;
}

// 设置子项的排序
.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

// 设置子项的伸缩比例
.flex-grow-1 {
  flex-grow: 1;
}

.flex-grow-2 {
  flex-grow: 2;
}

.flex-grow-3 {
  flex-grow: 3;
}

// 设置子项的初始尺寸
.flex-shrink-1 {
  flex-shrink: 1;
}

.flex-shrink-2 {
  flex-shrink: 2;
}

.flex-shrink-3 {
  flex-shrink: 3;
}

// 设置子项的伸缩基准
.flex-basis-auto {
  flex-basis: auto;
}

.flex-basis-fill {
  flex-basis: fill;
}

.flex-basis-content {
  flex-basis: content;
}

.flex-basis-percent {
  flex-basis: 50%;
}


// margin布局样式
.m-auto {
  margin: auto;
}

.mt-auto {
  margin-top: auto;
}

.mr-auto {
  margin-right: auto;
}

.mb-auto {
  margin-bottom: auto;
}

.ml-auto {
  margin-left: auto;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

@for $i from -10 through 20 {
  .margin-#{$i} {
    margin: #{$i}px;
  }
}

@for $i from -10 through 20 {
  .mt-#{$i} {
    margin-top: #{$i}px;
  }
}

@for $i from -10 through 20 {
  .mr-#{$i} {
    margin-right: #{$i}px;
  }
}

@for $i from -10 through 20 {
  .mb-#{$i} {
    margin-bottom: #{$i}px;
  }
}

@for $i from -10 through 20 {
  .margin-left-#{$i} {
    margin-left: #{$i}px;
  }
}

@for $i from -10 through 20 {
  .my-#{$i} {
    margin-top: #{$i}px;
    margin-bottom: #{$i}px;
  }
}

@for $i from -10 through 20 {
  .mx-#{$i} {
    margin-right: #{$i}px;
    margin-left: #{$i}px;
  }
}

// 背景颜色
@each $name, $color in $colors {
  .bg-#{$name} {
    background-color: $color;
  }
}



// 宽度
@for $i from 1  through 75 {
  .w-#{$i * 10} {
    width: #{$i * 10}rpx;
  }
}

// 宽度-%百分比
@for $i from 1 through 20 {
  .w-#{$i * 5}P {
    width: #{$i* 5%};
  }
}


// 屏幕宽度
@for $i from 1 through 20 {
  .w-#{$i* 5%}vw {
    width: #{$i* 5%}vw;
  }
}

// 高度
@for $i from 1 through 80 {
  .h-#{$i * 10} {
    height: #{$i * 10}rpx;
  }
}


// 高度-%百分比
@for $i from 1 through 20 {
  .h-#{$i* 5%}P {
    height: #{$i* 5%};
  }
}

// 屏幕高度
@for $i from 1 through 20 {
  .h-#{$i* 5%}vh {
    height: #{$i* 5%}vh;
  }
}



// 内边距
@for $i from 1 through 20 {
  .p-#{$i} {
    padding: #{$i}px;
  }
}

// 上内边距
@for $i from 1 through 20 {
  .pt-#{$i} {
    padding-top: #{$i}px;
  }
}

// 右内边距
@for $i from 1 through 20 {
  .pr-#{$i} {
    padding-right: #{$i}px;
  }
}

// 下内边距
@for $i from 1 through 20 {
  .pb-#{$i} {
    padding-bottom: #{$i}px;
  }
}

// 左内边距
@for $i from 1 through 20 {
  .pl-#{$i} {
    padding-left: #{$i}px;
  }
}

// 上下内边距
@for $i from 1 through 20 {
  .py-#{$i} {
    padding-top: #{$i}px;
    padding-bottom: #{$i}px;
  }
}

// 左右内边距
@for $i from 1 through 20 {
  .px-#{$i} {
    padding-left: #{$i}px;
    padding-right: #{$i}px;
  }
}

// 圆角
@for $i from 1 through 20 {
  .radius-#{$i} {
    border-radius: #{$i}px;
  }
}

// 间隔
// 宽度
@for $i from 1 through 20 {
  .gap-#{$i} {
    gap: #{$i}rpx;
  }
}



// 阴影
$shadows: (
  sm: (0 1px 2px 0 rgba(0, 0, 0, 0.05)),
  default: (0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)),
  md: (0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)),
  lg: (0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)),
  xl: (0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)),
  '2xl': (0 25px 50px -12px rgba(0, 0, 0, 0.25)),
  inner: (inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)),
  none: (0 0 rgba(0, 0, 0, 0))
);

@each $name, $value in $shadows {
  .shadow-#{$name} {
    box-shadow: $value;
  }
}



// 边框
@for $i from 1 through 5 {
  @each $color-name, $color-value in $colors {
    .border-#{$i}-#{$color-name} {
      border: #{$i}px solid $color-value;
    }
  }
}

@for $i from 1 through 5 {
  @each $color-name, $color-value in $colors {
    .border-top-#{$i}-#{$color-name} {
      border-top: #{$i}px solid $color-value;
    }

    .border-right-#{$i}-#{$color-name} {
      border-right: #{$i}px solid $color-value;
    }

    .border-bottom-#{$i}-#{$color-name} {
      border-bottom: #{$i}px solid $color-value;
    }

    .border-left-#{$i}-#{$color-name} {
      border-left: #{$i}px solid $color-value;
    }

    .border-x-#{$i}-#{$color-name} {
      border-left: #{$i}px solid $color-value;
      border-right: #{$i}px solid $color-value;
    }

    .border-y-#{$i}-#{$color-name} {
      border-top: #{$i}px solid $color-value;
      border-bottom: #{$i}px solid $color-value;
    }
  }
}


// 父元素的1/2 使用方法:father-1_2
@for $i from 2 through 20 {
  .father-1_#{$i} {
    width: percentage(1 / $i); // 子元素宽度为父元素的分数
  }
}




// 圆形,直径从5-100
@for $i from 1 through 20 {
  .circle-#{$i*10} {
    width: #{$i*10}px;
    height: #{$i*10}px;
    border-radius: 50%;
  }
}


// 位于屏幕的最底部位置
.bottom-element {
  position: fixed;
  z-index: 1000; // 可以根据实际情况调整 z-index
  bottom: 0;
  left: 0;
  right: 0;
}


// 按钮的基本样式
.btn {
  transition: background-color 0.3s ease;
}

// 按钮的点击后样式
.btn:active {
  background-color: #ff6600;
}

H5版本

// 文字粗细
$font-weights: (
  thin: 100,
  extra-light: 200,
  light: 300,
  regular: 400,
  medium: 500,
  semi-bold: 600,
  bold: 700,
  extra-bold: 800,
  black: 900
);

// 文字大小
@for $i from 8 through 50 {
  .font-#{$i} {
    font-size: #{$i}px;
  }
}




@each  $name, $weight in $font-weights {
  .font-#{$name} {
    font-weight: $weight;
  }
}



$aligns: (
  left,
  center,
  right,
  justify
);



// 文字位置
@each $align in $aligns {
  .text-#{$align} {
    text-align: $align;
  }
}



// 颜色
$colors: (
  red: #ff0000,
  darkRed: #d90209,
  green: #00ff00,
  blue: #0000ff,
  black: #000000,
  white: #ffffff,
  gray: #808080,
  lightGray: #e6e6e6,
  orange: #ffA500,
  yellow: #ffff00,
  pink: #ff69b4,
  purple: #800080, 
  brown13: #a52a2a,
  cyan14: #00ffff,
  magenta15: #ff00ff,
  lime16: #00ff00,
  teal17: #008080,
  navy18: #000080,
  maroon19: #800000,
  olive20: #808000,
  beige21: #f5f5dc,
  ivory22: #fffff0,
  khaki23: #f0e68c,
  tan24: #d2b48c,
  salmon25: #fa8072,
  coral26: #ff7f50,
  tomato27: #ff6347,
  gold28: #ffd700,
  silver29: #c0c0c0,
  indigo30: #4b0082,
  lavender31: #e6e6fa,
  turquoise32: #40e0d0,
  violet33: #ee82ee,
  peach34: #ffdab9,
  orchid35: #da70d6,
  skyBlue36: #87ceeb,
  mintGreen37: #98ff98,
  crimson38: #dc143c,
  forestGreen39: #228b22,
  slateGray40: #708090,
  sienna41: #a0522d,
  sirocco42: #736f6e,
  caputMortuum43: #592720,
  terraCotta44: #e2725b,
  redOxide45: #7d4427,
  zomp46: #39a78e,
  yellowGreen47: #9acd32,
  paleGreen48: #98fb98,
  paleTurquoise49: #afeeee,
  robinEggBlue50: #00cccc,
  lightSeaGreen51: #20b2aa,
  deepSkyBlue52: #00bfff,
  dodgerBlue53: #1e90ff,
  steelBlue54: #4682b4,
  powderBlue55: #b0e0e6,
  cornflowerBlue56: #6495ed,
  mediumSlateBlue57: #7b68ee,
  darkSlateBlue58: #483d8b,
  blueViolet59: #8a2be2,
  mediumOrchid60: #ba55d3,
  darkOrchid61: #9932cc,
  thistle62: #d8bfd8,
  plum63: #dda0dd,
  paleVioletRed64: #db7093,
  deepPink65: #ff1493,
  hotPink66: #ff69b4,
  mediumPurple67: #9370db,
  darkMagenta68: #8b008b,
  darkViolet69: #9400d3,
  darkSlateGray70: #2f4f4f,
  dimGray71: #696969,
  slateBlue72: #6a5acd,
  mediumBlue73: #0000cd,
  midnightBlue74: #191970,
  cadetBlue75: #5f9ea0,
  aquamarine76: #7fffd4,
  mediumAquamarine77: #66cdaa,
  darkSeaGreen78: #8fbc8f,
  lightGreen79: #90ee90,
  springGreen80: #00ff7f,
  lawnGreen81: #7cfc00,
  chartreuse82: #7fff00,
  mediumSpringGreen83: #00fa9a,
  paleGoldenrod84: #eee8aa,
  goldenrod85: #daa520,
  sandyBrown86: #f4a460,
  peru87: #cd853f,
  rosyBrown88: #bc8f8f,
  wheat89: #f5deb3,
  tan90: #ffd39b,
  darkOrange91: #ff8c00,
  coral92: #ff7256,
  dodgerBlue93: #FF8C00,
);


// 文字颜色
@each $name, $color in $colors {
  .text-#{$name} {
    color: $color;
  }
}


// 布局
// Flex容器样式
.flex {
  display: flex;
}

// 设置主轴方向
.flex-row {
  flex-direction: row;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-col {
  flex-direction: column;
}

.flex-col-reverse {
  flex-direction: column-reverse;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}


// 垂直居中
.vertical-center {
  display: flex;
  align-items: center; // 垂直居中
}

// 水平居中
.horizontal-center {
  display: flex;
  justify-content: center; // 水平居中
}


// 设置主轴对齐方式
.justify-start {
  justify-content: flex-start;
}

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

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

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

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

// 设置交叉轴对齐方式
.items-start {
  align-items: flex-start;
}

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

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

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

.items-stretch {
  align-items: stretch;
}

.items-spaceAround {
  align-items: space-around;
}

.items-spaceBetween {
  align-items: space-between;
}

// 设置子项在交叉轴上的对齐方式
.align-self-auto {
  align-self: auto;
}

.align-self-flex-start {
  align-self: flex-start;
}

.align-self-flex-end {
  align-self: flex-end;
}

.align-self-center {
  align-self: center;
}

.align-self-baseline {
  align-self: baseline;
}

.align-self-stretch {
  align-self: stretch;
}

// 设置子项的排序
.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

// 设置子项的伸缩比例
.flex-grow-1 {
  flex-grow: 1;
}

.flex-grow-2 {
  flex-grow: 2;
}

.flex-grow-3 {
  flex-grow: 3;
}

// 设置子项的初始尺寸
.flex-shrink-1 {
  flex-shrink: 1;
}

.flex-shrink-2 {
  flex-shrink: 2;
}

.flex-shrink-3 {
  flex-shrink: 3;
}

// 设置子项的伸缩基准
.flex-basis-auto {
  flex-basis: auto;
}

.flex-basis-fill {
  flex-basis: fill;
}

.flex-basis-content {
  flex-basis: content;
}

.flex-basis-percent {
  flex-basis: 50%;
}


// margin布局样式
.m-auto {
  margin: auto;
}

.mt-auto {
  margin-top: auto;
}

.mr-auto {
  margin-right: auto;
}

.mb-auto {
  margin-bottom: auto;
}

.ml-auto {
  margin-left: auto;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

@for $i from -100 through 100 {
  .margin-#{$i} {
    margin: #{$i}px;
  }
}

@for $i from -100 through 100 {
  .mt-#{$i} {
    margin-top: #{$i}px;
  }
}

@for $i from -100 through 100 {
  .mr-#{$i} {
    margin-right: #{$i}px;
  }
}

@for $i from -100 through 100 {
  .mb-#{$i} {
    margin-bottom: #{$i}px;
  }
}

@for $i from -100 through 100 {
  .margin-left-#{$i} {
    margin-left: #{$i}px;
  }
}

@for $i from -100 through 100 {
  .my-#{$i} {
    margin-top: #{$i}px;
    margin-bottom: #{$i}px;
  }
}

@for $i from -100 through 100 {
  .mx-#{$i} {
    margin-right: #{$i}px;
    margin-left: #{$i}px;
  }
}

// 背景颜色
@each $name, $color in $colors {
  .bg-#{$name} {
    background-color: $color;
  }
}



// 宽度
@for $i from 10 through 750 {
  .w-#{$i} {
    width: #{$i}rpx;
  }
}

// 宽度-%百分比
@for $i from 1 through 100 {
  .w-#{$i}P {
    width: #{$i* 1%};
  }
}


// 屏幕宽度
@for $i from 1 through 100 {
  .w-#{$i}vw {
    width: #{$i}vw;
  }
}

// 高度
@for $i from 10 through 800 {
  .h-#{$i} {
    height: #{$i}rpx;
  }
}


// 高度-%百分比
@for $i from 1 through 100 {
  .h-#{$i}P {
    height: #{$i* 1%};
  }
}

// 屏幕高度
@for $i from 1 through 100 {
  .h-#{$i}vh {
    height: #{$i}vh;
  }
}



// 内边距
@for $i from 1 through 50 {
  .p-#{$i} {
    padding: #{$i}px;
  }
}

// 上内边距
@for $i from 1 through 50 {
  .pt-#{$i} {
    padding-top: #{$i}px;
  }
}

// 右内边距
@for $i from 1 through 50 {
  .pr-#{$i} {
    padding-right: #{$i}px;
  }
}

// 下内边距
@for $i from 1 through 50 {
  .pb-#{$i} {
    padding-bottom: #{$i}px;
  }
}

// 左内边距
@for $i from 1 through 50 {
  .pl-#{$i} {
    padding-left: #{$i}px;
  }
}

// 上下内边距
@for $i from 1 through 50 {
  .py-#{$i} {
    padding-top: #{$i}px;
    padding-bottom: #{$i}px;
  }
}

// 左右内边距
@for $i from 1 through 50 {
  .px-#{$i} {
    padding-left: #{$i}px;
    padding-right: #{$i}px;
  }
}

// 圆角
@for $i from 1 through 50 {
  .radius-#{$i} {
    border-radius: #{$i}px;
  }
}

// 间隔
// 宽度
@for $i from 1 through 50 {
  .gap-#{$i} {
    gap: #{$i}rpx;
  }
}



// 阴影
$shadows: (
  sm: (0 1px 2px 0 rgba(0, 0, 0, 0.05)),
  default: (0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)),
  md: (0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)),
  lg: (0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)),
  xl: (0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)),
  '2xl': (0 25px 50px -12px rgba(0, 0, 0, 0.25)),
  inner: (inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)),
  none: (0 0 rgba(0, 0, 0, 0))
);

@each $name, $value in $shadows {
  .shadow-#{$name} {
    box-shadow: $value;
  }
}



// 边框
@for $i from 1 through 50 {
  @each $color-name, $color-value in $colors {
    .border-#{$i}-#{$color-name} {
      border: #{$i}px solid $color-value;
    }
  }
}

@for $i from 1 through 50 {
  @each $color-name, $color-value in $colors {
    .border-top-#{$i}-#{$color-name} {
      border-top: #{$i}px solid $color-value;
    }

    .border-right-#{$i}-#{$color-name} {
      border-right: #{$i}px solid $color-value;
    }

    .border-bottom-#{$i}-#{$color-name} {
      border-bottom: #{$i}px solid $color-value;
    }

    .border-left-#{$i}-#{$color-name} {
      border-left: #{$i}px solid $color-value;
    }

    .border-x-#{$i}-#{$color-name} {
      border-left: #{$i}px solid $color-value;
      border-right: #{$i}px solid $color-value;
    }

    .border-y-#{$i}-#{$color-name} {
      border-top: #{$i}px solid $color-value;
      border-bottom: #{$i}px solid $color-value;
    }
  }
}


// 父元素的1/2 使用方法:father-1_2
@for $i from 2 through 10 {
  .father-1_#{$i} {
    width: percentage(1 / $i); // 子元素宽度为父元素的分数
  }
}




// 圆形,直径从5-100
@for $i from 5 through 100 {
  .circle-#{$i} {
    width: #{$i}px;
    height: #{$i}px;
    border-radius: 50%;
  }
}


// 位于屏幕的最底部位置
.bottom-element {
  position: fixed;
  z-index: 1000; // 可以根据实际情况调整 z-index
  bottom: 0;
  left: 0;
  right: 0;
}


// 按钮的基本样式
.btn {
  transition: background-color 0.3s ease;
}

// 按钮的点击后样式
.btn:active {
  background-color: #ff6600;
}
WiFiMing
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
使用scss开发小程序（各种小程序平台通用）
03-29
微信小程序的 wxss 、阿里旗下淘宝、支付宝小程序的 acss 等等语法很类似原生css，但是在web开发里用惯了动态css语言，再写回原生css很不习惯，尤其是父子样式的嵌套写法非常繁琐。 因此，我希望能有一个自动化...
wp-tailwindcss-theme-boilerplate：使用Tailwind CSS，SCSS和Laravel Mix进行WordPress主题开发的极简样板
02-05
入门： 克隆到一个空的主题目录cd进入您的新主题目录运行npm install 将local-example.json文件复制到local.json ，然后将proxy值替换为本地开发主机名这将允许您在处理CSS / JS时使用实时重载/注入运行搜索并替换...
uni-app 使用 tailwindcss 兼容小程序
searchtext的博客
02-07 2299
uni-app 使用 tailwindcss 兼容小程序，vue-cli
如何在uni-app项目里使用tailwindcss，且兼容小程序（详细）
热门推荐
黑客与画家
05-26 2万+
Hbuilder构建项目自由度比较低，我选择使用VScode构建uni-app 不懂的请看这一篇文章：《如何用vscode构建uni-app项目》 安装相关依赖： 这是我项目的依赖给大家参考一下： 安装tailwindcss 本人安装的是兼容版的：详细安装请移步>>> tailwindcss官网-安装 1.安装tailwindcss `npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcs
Uniapp如何使用tailwindcss,,,,,,,,,,,,,,css框架tailwindcss在Uniapp+v3中如何使用
最新发布
zhw_1219的博客
06-05 1124
css框架tailwindcss,,,,uniapp使用tailwindcss
创建uni-app项目及安装scss插件
ajiang0622的博客
11-09 4375
uni-app在手，做啥都不愁 -什么是uni-app? 一个使用 Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。 一套代码编到13个平台 uni-app官网：https://uniapp.dcloud.io/ uView :https://www.uviewui.com/ -快速上手 1、创建uni-app项目 这里用到的是HBuilderX 点击
uniapp +vue3+ts+tailwindcss 开发搭建兼容小程序版本
HHH917的博客
11-09 7714
1、创建uniapp cli版本 uniapp官网 环境安装 命令行使用以下命令 //使用正式版（对应HBuilderX最新正式版） vue create -p dcloudio/uni-preset-vue my-project //使用alpha版（对应HBuilderX最新alpha版） vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project 选择默认模板 typescript 安装 到这一步 完成 uniapp+vue3+
增强原生小程序开发，构建 tailwind + postcss + scss 最小化工具链
ice breaker's blog
09-01 1013
增强原生小程序开发，构建 tailwind + postcss + scss 最小化工具链 前言 书接上回 tailwindcss 小程序定制化之旅 我们知道 uni-app 和 tarojs 在最终打包成小程序运行的时候，都是使用的 webpack，所以在这 2 个框架中，我们可以使用 *-loader 轻而易举的赋予它们这方面的能力。 但是，假如我们使用的是原生开发呢？ 原生开发的选项 使用微信开发工具的小伙伴们，肯定注意到，在 项目详情 -> 本地设置 中, 有上传代码时 样式自动补全,自动压.
uniapp---常用scss样式
魏依一的博客
02-06 262
b. 水平居中（与弹性布局常一起使用，呈现下图效果）：justify-content: center。内边框：（外边框会导致页面超出屏幕）box-sizing: border-box;c. 居中对齐弹性盒的各项 元素：align-items: center;强制元素不换行（一般给父级元素加）：white-space: nowrap;a. 弹性布局：display: flex;宽度：（全屏）width: 750rpx;平均分布：flex：1。
uniapp使用SCSS混入 封装flex布局 从此一行搞定flex
weixin_46448762的博客
03-24 1017
将上面的scss文件导入到app.vue中。最后就可以直接在全局的样式中使用了。首先定义demo.scss。
uniapp使用scss 嵌套语法
分享互联网的有趣知识~
10-12 904
新建一个scss文件，在scss文件内编写样式，在对应的页面引入scss。需要在对应的style上设置lang设置语言为scss。安装完成后，HBuilder会自动编译scss。
uniapp外部scss文件使用scss语法不生效
qq_45067263的博客
01-12 4693
项目场景： 页面的样式重复我想提取出来作为公共样式 新建scss文件，然后引入，结果样式不生效 问题描述： uniapp官网示例引入css的方法 /* 绝对路径 */ @import url('/common/uni.css'); @import url('@/common/uni.css'); /* 相对路径 */ @import url('../../common/uni.css'); 解决方案： 正确的引入方法 @import '@/common/common.scss'; ...
基于uniapp开发的一套仿喜茶GO小程序的前端模板
02-25
通常，一个uniapp项目会包含配置文件（如unpackage.config.js）、页面文件（如vue组件）、样式表（如css或scss）、图片资源、脚本文件（如js或json）、以及可能的插件或第三方库。此外，可能会有README文档提供安装...
css — > 使用scss生成常用的基本css样式
01-08
【CSS与SCSS基本使用及常见样式生成】 在前端开发中，CSS是我们构建网页样式的主要工具，但随着项目复杂度的提升，维护大量的CSS代码变得困难。这时，预处理器如SCSS（Sassy CSS）应运而生，它提供了一种更强大、更...
uniapp 微信小程序 时间段选择组件
07-24
在微信小程序开发中，开发者经常需要为用户提供便捷的时间选择功能，比如预定服务、安排日程等。`uniapp`是一个跨平台的开发框架，它允许开发者编写一次代码，即可运行在多个平台上，包括微信小程序。在`uniapp`中...
基于uniapp+WeUI+colorUI开发设计的一个多平台网上挂号系统源码(微信小程序、支付宝小程序)+项目说明.zip
12-28
该系统主要通过使用uniapp进行微信小程序、 支付宝小程序以及H5页面的兼容性开发，实现一套代码多个平台使用，当然部分内容依然得分开的处理；该系统主要是 进行一家总医院及多家分院的进行挂号处理，可以通过从医院...
小说阅读uniapp小程序
06-27
【标题】"小说阅读uniapp小程序"所涉及的知识点主要集中在使用uniapp框架开发微信小程序，为用户提供在线阅读小说的功能。uniapp是一个基于Vue.js的多端开发框架，支持快速构建跨平台的应用，包括微信小程序、H5、...
基于JavaScript、CSS和HTML的惠民订水微信小程序会员端设计源码
05-30
本项目是基于JavaScript、CSS和HTML的惠民订水微信...该项目适用于惠民订水微信小程序会员端的开发和设计，为用户提供了一个丰富的资源库，包含多种文件类型，方便进行惠民订水微信小程序会员端相关的开发和设计工作。
uniapp使用scss不生效
06-08
如果你在 Uniapp 中使用 SCSS 无效的话，首先你需要确认你是否已经正确安装了 SCSS 相关的依赖。如果安装了依赖仍然无效，那么你可以尝试以下几个步骤： 1. 确认你的文件命名格式是否正确：在 Uniapp 中使用 SCSS ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

WiFiMing

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值