как правильно рассчитать разум в сасси?

Question

Мы в первый раз разрабатываем приложение, а дизайнер прототипирует макет в retina modus, хотя это не наша цель для следующего выпуска, теперь нам нужно сделать, чтобы получить значения, предоставленные его и разделить на 2.

к примеру, у нас есть ярлык, чтобы показать текст и метка имеет следующий scss:

 label { 
      font-family: $font-family-medium; 
      color: color($colors, slate); 
      font-size: 2.25rem/2; 
      letter-spacing: 0.0625rem/2; 
      line-height: 3.25rem/2; 
      white-space: normal; 
     } 

это результат:

Это выглядит хорошо, но в зависимости от того, где я применяю код, хром сообщает, что свойство css недействительно. Хорошо, тогда я добавить функцию calc в коде выше:

 label { 
      font-family: $font-family-medium; 
      color: color($colors, slate); 
      font-size: calc(2.25rem/2); 
      letter-spacing: calc(0.0625rem/2); 
      line-height: calc(3.25rem/2); 
      white-space: normal; 
     } 

Так хромовые стопы жалующихся, но это результат:

Текст этикетки получает wayyy меньше.

В чем разница между использованием calc и использованием calc?

Я полагаю, что у меня отсутствует важная концепция макета/дизайна?

UPDATE:

Я просто понял, что первый код IST для хрома всегда недействителен:

То есть один момент, который я понял. Таким образом, расчет модуляции сетчатки на 2 не является хорошим, я думаю?

Answer 1

Создание функции

@function calculateRem($size) { 
    $remSize: $size/16px; 
    @return #{$remSize}rem; 
} 

Создание подмешать

Далее мы создаем подмешать, который вызывает функцию:

@mixin fontSize($size) { 
    font-size: $size; //Fallback in px 
    font-size: calculateRem($size); 
} 

Sass

h1 { 
    @include fontSize(32px); 
} 

проверить это article

Answer 2

Проблема заключается в том что вы не делаете разделение, вы получаете в CSS, например, значение 0.0625rem/2 и это не является действительным CSS, Вы должны поставить в скобки, чтобы получить правильное значение:

SCSS

label { 
    font-family: arial; 
    color:red; 
    font-size: (2.25rem/2); 
    letter-spacing: (0.0625rem/2); 
    line-height: (3.25rem/2); 
    white-space: normal; 
} 

ВЫВОД CSS

label { 
    font-family: arial; 
    color: red; 
    font-size: 1.125rem; 
    letter-spacing: 0.03125rem; 
    line-height: 1.625rem; 
    white-space: normal; 
} 

Когда вы используете calc(), CSS может выполнять разделение по отдельности.