css - Susy Grid 设置中的 Rem

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

但是在编译时我得到:

(Line 146 of _functions.scss: 0.01031em/rem is not a unitless number for `percentage')

使用 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一样的，我想你会没事的。如果你确实得到了奇怪的尺寸，那就通过并调整你的值(value)观。 susy-grid-background也可能会帮助您克服任何奇怪的事情。

编辑:我还认为您希望对基本网格大小使用整数。您的转换可能会扰乱 Susy 计算创建网格的方式。