Rem在Susy Grid设置中-Java 学习之路

我使用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或主网格设置可以解决我的问题 . 我还从1.0.3更新了Susy到1.0.8，但这也没有效果 .

有任何想法吗？

2 回答

0
在您的配置中尝试此操作：
```
// 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如何创建网格 .
回复于 2024-05-08T20:00:13+08:00
2

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

回复于 2024-05-08T20:00:13+08:00

Rem在Susy Grid设置中

2 回答

相关问题