我正在制作一个微型前端的样式表，它有三种不同的视图类型（触摸，标准和紧凑）。根据您的设备自动选择触摸和标准，但您始终可以通过用户首选项更改它。
根据您选择的视图类型，字体，边距和填充会受到影响。这些3之间没有直接关系，例如，在紧凑模式下，填充相对于字体大小比在触摸模式下小得多。
由于它是一个微前端，我不能使用rems并在html标签上设置font-size，因为它会影响所有组合的微前端。
使用SASS，我所做的是创建一个函数将px转换为rem，我使用该函数来计算以更正不同组件和视图类型的字体大小，边距和填充。
在顶级我有一个看起来像这样的scss文件
// The different font-sizes
$font-size-standard: 14;
$font-size-touch: 16;
$font-size-compact: 11;
// namespaced to not interfere with other styles
.toolkit {
$font-size: $font-size-standard;
@include 'someComponents';
}
.toolkit.touch {
$font-size: $font-size-touch;
@include 'someComponents';
}
.toolkit.compact {
$font-size: $font-size-compact;
@include 'someComponents';
}
在组件中，存在基于所选字体大小的逻辑和计算。
这种方法有效，但我最终得到了一个庞大的css文件，因为一切都是三重的。
有更好的方法吗？