uniapp使用scss mixin抽离css常用的公共样式

1、编写通用scss样式文件

css 复制代码
// 通用 Flex Mixin
@mixin flex($direction: row, $justify: flex-start, $align: stretch, $wrap: nowrap) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
  flex-wrap: $wrap;
}

// 水平居中
@mixin flex-center-horizontal {
  @include flex(row, center, center);
}

// 垂直居中
@mixin flex-center-vertical {
  @include flex(column, center, center);
}

// 文本省略号
@mixin ellipsis($lines: 1) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $lines; // 多行省略
  -webkit-box-orient: vertical;
}

// Clearfix (清除浮动)
@mixin clearfix {
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}

// Box Shadow (阴影效果)
@mixin box-shadow($x: 0px, $y: 4px, $blur: 6px, $color: rgba(0, 0, 0, 0.1)) {
  box-shadow: $x $y $blur $color;
}

// Border Radius (圆角样式)
@mixin border-radius($radius: 4px) {
  border-radius: $radius;
}

// Transition (过渡动画)
@mixin transition($properties: all, $duration: 0.3s, $easing: ease) {
  transition: $properties $duration $easing;
}

// 绝对定位居中
@mixin absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2、在uni.scss引入上述scss文件

3、在页面上使用,需加上lang=scss声明

编译后的效果:

相关推荐
xw52 小时前
uni-app中v-if使用”异常”
前端·uni-app
!win !2 小时前
uni-app中v-if使用”异常”
前端·uni-app
小帆聊前端4 小时前
Flex 布局实战指南:从踩坑到精通,解决 90% 布局难题
css
谢尔登5 小时前
【CSS】层叠上下文和z-index
前端·css
2501_915918415 小时前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
Alice-YUE5 小时前
【CSS学习笔记3】css特性
前端·css·笔记·html
睡不着先生5 小时前
CSS `:has()` 实战指南:让 CSS 拥有“if 逻辑”
css
00后程序员张6 小时前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
yddddddy15 小时前
css的基本知识
前端·css
昔人'15 小时前
css `lh`单位
前端·css