苏西网格背景

Question

我有这些样式：

+with-layout(8 1/4)
  .fact-circle-container
    +container(show)
    +clearfix
    font-size: 4px
    padding: 0 30px

    li
      +gallery(2)

我的网格项目正确排列。在这种情况下，每个<li> 跨越 8 列中的两列，但是当我打开如上所示的网格背景显示时，我得到以下输出：

知道为什么要这样做吗？当然我应该看到 8 列？

谢谢， 尼尔

更新 1：

所以，正在输出的background-size 语句输出不正确，像这样background-size: 8.47458%, 100% 1.5;

似乎出于某种原因将我的基线高度设置添加到末尾。我通过将我的 $base-line-height 变量更改为像 7.5 这样的奇怪变量来确认这一点，这会将输出更改为： background-size: 8.47458%, 100% 7.5;

下面是我的更多代码，包括初始基线高度设置：

// Line heights
// ============
$base-line-height:                  7.5;
$header-line-height:                1.25;

// Font weights
// ============
$base-font-weight:                  400;
$header-font-weight:                700;

// Font colours
// ============
$base-font-color:                   $color-nt-grey;
$base-link-color:                   $color-nt-bright-blue;
$base-link-hover-color:             saturate($base-link-color, 20%);
$base-link-visited-color:           saturate($base-link-color, 20%);

// Other sizes
// ===========
$base-border-radius: 3px;
$base-spacing: $base-line-height * 1em;
$base-z-index: 0;

$fixed-font-family:                 "Andale Mono", AndaleMono, monospace;
$fixed-font-size:                   15px;
$fixed-line-height:                 1.2;

$base-background-color: $color-white;

$separator-width:                   1px;
$separator-style:                   dashed;
$separator-color:                   $color-nt-dark-blue;

$rhythm-unit:                       'rem';

$p-margin:                          0.7  * $base-font-size;
$list-indent:                       20px;

// Susy grid settings
// ==================
$susy: (
  flow: ltr,
  math: fluid,
  output: float,
  gutter-position: after,
  container: 1440px,
  container-position: center,
  columns: 12,
  gutters: .25,
  column-width: false,
  global-box-sizing: border-box,
  last-flow: to,
  debug: (
    image: hide,
    color: rgba(#66f, .25),
    output: background,
    toggle: top right,
  ),
  use-custom: (
    background-image: true,
    background-options: false,
    box-sizing: true,
    clearfix: false,
    rem: true,
  )
);

有什么想法为什么在没有明显原因的情况下在此处添加行高？

Answer 1

Susy 背景网格使用background-size 将单列渐变（您在此处看到的）转换为正确数量的重复列（您期望的 8 个）。我猜您在此处未包含的代码中覆盖了其他地方的 background-size 设置？

但是我不能用你粘贴的代码重现错误，所以这只是一个猜测。

更新：

您的base-line-height 正在作为 Susy 与 Compass 集成的一部分输出 — 以显示您的基线网格以及列网格。指南针base-line-height 设置在px 中，可以在这里使用。显然，我们应该对这种集成更聪明一点。你可以在 Github 上提交问题吗？

同时，当您想查看背景网格时，可以使用show-columns 而不是show 来解决它。

 +container(show-columns)

附带说明，container mixin 包含一个 clearfix，因此您的 clearfix mixin 在这种情况下是多余的。