0

我已经使用 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，但这也没有任何效果。

有任何想法吗？

4

2 回答 2

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 版本才能获得它，甚至可能需要使用 Susy 1.0.9。

您可以使用 rem mixin（包括在 Susy 中）来创建 px 的后备。IE：

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

只要你离开$base-font-size和$base-line-height一样，我想你会没事的。如果您确实获得了奇怪的尺寸，只需检查并调整您的值。susy-grid-background可能也可以帮助您克服任何奇怪之处。

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

于 2013-07-31T03:40:54.723 回答
0

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

于 2013-07-31T10:57:46.247 回答