Susy

Question

我正在使用 susy 流体网格容器构建网站。但是我的一些界面元素需要固定宽度。所以有这些设置：

$susy: (
  columns: 12,
  container: rem-calc(1680),
  gutters: 28px/112px,
  global-box-sizing: border-box,
  gutter-position: split
);

我想轻松获得例如 8 列跨度，但是是静态的。所以 @include span(8 of 12) 会产生百分比值，这很好，但在某些情况下我想获得静态值（当然基于容器固定的最大宽度）。

可以吗？

Answer 1

在上面的 susy 全局设置中，您可以添加：

math: static

但为此您还需要包含列宽对象。

假设您希望每列的宽度为 40 像素，使用您的示例，它是这样的：

$susy: (
  columns: 12,
  ...
  math: static,
  column-width: 40px
);

当您执行 @include span 而不是使用 % 基础时，它将使用 px 基础，如您所愿，它是静态的。

Answer 2

是的 - 您可以将 static 作为参数传递给您想要静态输出的任何 Susy 函数或 mixin — @include span(8 of 12 static) — 只要您有 column-width 或 container设置。（不要同时设置，否则可能会发生冲突）

更新：哦，我看到上面的评论中提到了这一点...

Susy - 获取流体容器中的静态跨度宽度