uni-app uni.scss变量未带单位问题

开发环境	版本号	项目创建方式
Windows	win11	HBuilderX
Android	Android 14
华为
mete60
vue	vue3

示例代码：

/* 文字尺寸 */
$uni-font-size-sm:12px;
$uni-font-size-base:14px;
$uni-font-size-lg:16;

这个$uni-font-size-lg没有带单位，难看

操作步骤：

预期结果：

实际结果：

bug描述：

/* 文字尺寸 */
$uni-font-size-sm:12px;
$uni-font-size-base:14px;
$uni-font-size-lg:16;

这个$uni-font-size-lg没有带单位，难看

yibo5220 1楼•6 天前

感谢反馈，后续会优化。

yuanlaile 2楼•6 天前作者

在 Uni-app 中，uni.scss 是一个全局样式文件，用于定义一些全局的样式变量。在使用这些变量时，如果变量值没有单位，可能会导致样式不符合预期。以下是一些常见的处理方式和注意事项：

1. 确保变量带有单位

在定义变量时，确保变量值带有单位（如 px、rem、em 等）。例如：

$font-size: 14px;
$padding: 10px;

2. 在使用时添加单位

如果变量本身没有单位，可以在使用时手动添加单位。例如：

$font-size: 14;
$padding: 10;

.text {
  font-size: $font-size + px;
  padding: $padding + px;
}

3. 使用 `calc()` 函数

如果需要动态计算样式值，可以使用 calc() 函数。例如：

$font-size: 14;
$padding: 10;

.text {
  font-size: calc(#{$font-size} * 1px);
  padding: calc(#{$padding} * 1px);
}

4. 使用 `unit()` 函数

在 Sass 中，可以使用 unit() 函数来确保变量带有单位。例如：

$font-size: 14;
$padding: 10;

.text {
  font-size: unit($font-size, px);
  padding: unit($padding, px);
}

5. 全局检查

在项目中，建议全局检查 uni.scss 文件，确保所有变量都带有单位，避免在后续开发中出现问题。

示例

假设你在 uni.scss 中定义了一些变量：

$font-size: 14px;
$padding: 10px;

然后在组件中使用这些变量：

<template>
  <view class="text">Hello, Uni-app!</view>
</template>

<style lang="scss" scoped>
.text {
  font-size: $font-size;
  padding: $padding;
}
</style>