Question

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

很明显，遍历每个地方都定义了字体大小或粗细，并没有必要添加条件，（幸运的是）我已经用sass变量定义了所有字体大小和粗细。

无论是否有比条件sass变量更好的解决方案，我想知道：

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

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

Answer 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中则显示绿色。

带原生脚本的条件Sass变量

1 个答案: