Susy网格设置中的Rem

Question

我已经建立了一个网站使用苏西和网格是指定在em，但由于击中一个问题，我需要改变网格设置使用rems。

我在html上设置的基本字体大小为16 My，这是Susy网格设置的设置：

$total-columns    : 16
$column-width     : remCalc(51.25px)
$gutter-width     : remCalc(10px)
$grid-padding     : remCalc(10px)
$container-style  : magic

remCalc函数是：

@function remCalc($pxWidth)
  @return parseInt($pxWidth) / parseInt($base-font-size) * 1rem

但是，在编译这些时，我得到：

(_functions.scss第146行: 0.01031em/rem不是“百分比”的无单位数)

使用rem或主网格设置可以解决我的问题。我还将Susy从1.0.3更新到1.0.8，但这也没有任何效果。

有什么想法吗？

Answer 1

这是通过更新项目中另一个Sass变量上的单元来解决的。杰西的回答，虽然没有解决这个问题，也是非常有用的。

Answer 2

在您的配置中尝试这样做：

// Vertical Rhythm Config
$rhythm-unit          : rem;
$base-rhythm-unit     : <number>rem;
$relative-font-sizing : true;

// Susy Config
$column-width : <number>rem;
$gutter-width : <number>rem;
$grid-padding : <number>rem;

<number>是您首选的调整大小的地方。不过，$rhythm-unit是一个可操作的变量，您可能需要转到Compass的alpha版本才能得到它，甚至可能还需要使用Susy1.0.9。

您可以使用rem (包括在Susy中)创建px的回退。即：

@include rem(height, image-height('image.png'));

只要你同样离开$base-font-size和$base-line-height，我想你会没事的。如果你确实得到了奇怪的大小，只需通过和调整你的价值观。susy-grid-background可能也会帮助您克服任何奇怪之处。

编辑:我也认为你想要使用完整的数字作为你的基本网格大小。您的转换可能会影响Susy如何创建网格。