Условные переменные Sass с Nativescript

Question

Android и iOS отображают шрифты совершенно разными способами.Мне бы хотелось, чтобы их рендеры выглядели немного более схожими, поэтому мне нужно изменить размеры шрифтов и веса для всего моего приложения в зависимости от того, работает ли оно на iOS или Android.

Очевидно, чтов каждом месте определяется размер шрифта или вес, и добавление условного выражения for не может быть и речи, и (к счастью) у меня уже есть все размеры и веса шрифта, определенные переменными sass.

Независимо от того, действительно лиесть лучшее решение, чем условные переменные sass, я хотел бы знать:

Как я могу условно выбрать переменные sass в nativescript?

Я знаю, что модули будут использовать MyModule.ios.css или MyModule.android.css в зависимости от ОС.Могу ли я воспользоваться этим?

Answer 1

Да, вы на правильном пути. Вы можете использовать MyVariable.android.scss и MyVariable.ios.scss для определения различных значений переменной Sass. В моем проекте совместного использования кода у меня также есть MyVariable.scss, который я использую для HTML (Web).

Я создал образец игровой площадки для вас здесь . В моем 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;
}

Показывает red текст в ios, в то время как в android текст зеленый.