uni-app SCSS代码编译错误

uni-app SCSS代码编译错误

项目信息 详情
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 10.13.6
HBuilderX类型 正式
HBuilderX版本号 3.2.16
项目创建方式 HBuilderX

操作步骤：

padding-bottom: calc(constant(safe-area-inset-bottom) + $offset);
padding-bottom: calc(env(safe-area-inset-bottom) + $offset);
}
.safe-bottom {
[@include](/user/include) safe-bottom-offset(30upx)
}```

### 预期结果：
``` .safe-bottom {
padding-bottom: calc(constant(safe-area-inset-bottom) + 30rpx);
padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);
}```

### 实际结果：
``` .safe-bottom {
padding-bottom: calc(constant(safe-area-inset-bottom) + $offset);
padding-bottom: calc(env(safe-area-inset-bottom) + $offset);
}```

### bug描述：

scss使用mixin并设置参数时,编译后参数没有被@include传递的参数所替换


更多关于uni-app SCSS代码编译错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

使用 # 将变量放进去， calc 中不识别 变量 @mixin safe-bottom-offset($offset) {
padding-bottom: calc(constant(safe-area-inset-bottom) + #{$offset});
padding-bottom: calc(env(safe-area-inset-bottom) + #{$offset});
}
.safe-bottom {
@include safe-bottom-offset(30px);
}

更多关于uni-app SCSS代码编译错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个编译错误是因为uni-app的SCSS编译器在处理calc()函数中的变量时存在问题。在calc()函数内部，SCSS变量$offset没有被正确解析和替换。

解决方案：

  1. 使用插值语法： 将$offset改为#{$offset}，这样SCSS会先计算变量值再放入calc()函数中：

    [@mixin](/user/mixin) safe-bottom-offset($offset: 0) {
  padding-bottom: calc(constant(safe-area-inset-bottom) + #{$offset});
  padding-bottom: calc(env(safe-area-inset-bottom) + #{$offset});
}

  2. 如果上述方法无效，可以尝试字符串拼接：

    [@mixin](/user/mixin) safe-bottom-offset($offset: 0) {
  padding-bottom: unquote('calc(constant(safe-area-inset-bottom) + ' + $offset + ')');
  padding-bottom: unquote('calc(env(safe-area-inset-bottom) + ' + $offset + ')');
}
回到顶部