Question

我使用Susy构建了一个网站，并且在em中指定了网格，但由于遇到了问题，我需要更改网格设置以使用rems。

我在html上设置的基本字体大小为16px，这是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

在您的配置中尝试此操作：

// 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版本来获取它，甚至可能是Susy 1.0.9。

您可以使用rem mixin（Susy附带）创建px的后备。即：

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

只要您离开$base-font-size和$base-line-height，我认为您一定会好的。如果你确实得到了奇怪的大小调整，那么只需要调整你的价值观。 susy-grid-background也可能会帮助您解决任何奇怪问题。

编辑：我还认为您希望将整数用于基本网格大小。你的转换可能会搞乱Susy如何创建网格。

Answer 2

这是通过在项目的其他地方更新另一个Sass变量的单位来解决的。 Jesse的回答虽然没有解决这个问题，但也非常有用和有用。

Rem在Susy Grid设置中

2 个答案: