使用 Nativescript 的条件 Sass 变量答案

【问题标题】：Conditional Sass Variables with Nativescript使用 Nativescript 的条件 Sass 变量
【发布时间】：2019-06-06 10:58:14
【问题描述】：

Android 和 iOS 以截然不同的方式呈现字体。我希望能够让它们的渲染看起来更相似，所以我需要根据它是在 iOS 还是 android 上更改整个应用程序的字体大小和粗细。

显然，遍历每个定义字体大小或粗细的地方并添加条件 for 是不可能的，而且（幸运的是）我已经有了由 sass 变量定义的所有字体大小和粗细。

不管有没有比条件sass变量更好的解决方案，我都想知道：

如何在 nativescript 中有条件地选择 sass 变量？

我知道模块将根据操作系统使用MyModule.ios.css 或MyModule.android.css。我可以利用它吗？

【问题讨论】：

标签： sass nativescript

【解决方案1】：

是的，你在正确的轨道上。您可以使用 MyVariable.android.scss 和 MyVariable.ios.scss 为 Sass 变量定义不同的值。在我的代码共享项目中，我也有 MyVariable.scss 用于 HTML(Web)。

我为您创建了一个示例游乐场here。在我的 home.component.ios.scss

$labelfontSize: 10;
$labelfontColor: red;
.home-panel{
    vertical-align: center; 
    font-size: 20;
    margin: 15;
}

.description-label{
    margin-bottom: 15;
    color: $labelfontColor;
    font-size: $labelfontSize;
}

在我的 home.component.android.scss

$labelfontSize: 18;
$labelfontColor: green;
.home-panel{
    vertical-align: center; 
    font-size: 20;
    margin: 15;
}

.description-label{
    margin-bottom: 15;
    color: $labelfontColor;
    font-size: $labelfontSize;
}

它在 ios 中显示 red 文本，而在 android 文本是绿色的。

【讨论】：

我将如何有条件地导入它们。我不想在我使用变量的每个文件中都导入两者，并且无法从根 app.scss 文件中导入。
您只需要导入 MyVariable.scss 而不是 MyVariable.android.scss 或 ios 之一。根据平台编译。
您介意显示一些代码吗？我不认为你所说的对我的情况真的有用，但我很难从措辞上说出来。
我为你创建了一个游乐场。 play.nativescript.org/?template=play-ng&id=0YAkBN
啊。谢谢你。刚刚检查了一下，这并不能满足我的要求。我希望能够只更改变量，而不必复制粘贴所有 css。