如何在sass中正确计算rem？

我们第一次开发一个应用程序，设计师已经在视网膜模型原型的布局，虽然这不是我们的下一个版本的目标，那么现在我们要做的，是获得由他和2如何在sass中正确计算rem？

例如鸿沟，我们有一个标签来显示文本和标签有以下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; 
     }

这就是结果：

这看起来不错，但取决于我在哪里应用代码chrome告诉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; 
     }

因此Chrome停止抱怨，但结果如下：

在标签中的文本得到wayyy小。

在sass中使用calc而没有使用calc有什么区别？

我想我错过了一些重要的布局/设计概念？

UPDATE：

我刚刚意识到，第一个代码为IST铬始终无效：

这是我想通了一分。所以视网膜模式除以2的计算不是很好，我猜？

来源

2016-07-14 DAG

创建功能

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

创建混入

接下来，我们创建一个调用函数一个mixin：

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

萨斯

h1 { 
    @include fontSize(32px); 
}

检查这个article

来源

2016-07-14 07:32:14

的问题是你没有做的划分，你在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; 
}

OUTPUT CSS

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

当你使用calc()时，CSS可以自行完成分割。

来源

2016-07-14 07:48:40 blonfu

你是对的！无论如何，标题应该是如何对sass进行正确的计算。无关于rems，px，vh .... –

如何在sass中正确计算rem？

回答

相关问题