0

我有这些风格：

+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,
  )
);

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

4

1 回答 1

0

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

但我无法用您粘贴的代码重现错误，所以这只是一个猜测。

更新：

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

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

 +container(show-columns)

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

于 2015-01-10T20:42:18.523 回答