title: how to calculate rem properly in sass?
body: <p>We are for the first time developing an app and the designer has prototyped the layout in <strong>retina modus</strong>, although this is not our goal for the next release, then now what we have to do, is to get the values provided by him and divide by 2.</p>
  
  <p>For instance, we have a label to show a text and the label has the following <code>scss</code>:</p>
  
  <pre><code>        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;
          }
  </code></pre>
  
  <p>That is the result:</p>
  
  <p><a href="https://i.stack.imgur.com/EmPyZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EmPyZ.png" alt="enter image description here"></a></p>
  
  <p>That looks good, but depending where I apply the code chrome tells that the <code>css</code> property is not valid. Ok, then I add the function <code>calc</code> to the code above:</p>
  
  <pre><code>        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;
          }
  </code></pre>
  
  <p>So chrome stops complaining, but that is the result:</p>
  
  <p><a href="https://i.stack.imgur.com/MBReG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MBReG.png" alt="enter image description here"></a></p>
  
  <p>The text in label gets wayyy smaller.</p>
  
  <p>What is the difference between using <code>calc</code> and not using <code>calc</code> in sass?</p>
  
  <p>I suppose I'm missing some important layout/design concept?</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I just realized that the first code ist for chrome always invalid:</p>
  
  <p><a href="https://i.stack.imgur.com/ZNTmL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZNTmL.png" alt="enter image description here"></a></p>
  
  <p>That is one point that I figured out. So the calculation of retina modus dividing by 2 is not good I guess?</p>