Question

我有这些风格：

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

    li
      +gallery(2)

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

enter image description here 知道为什么这样做吗？当然我应该看到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是多余的。

Susy网格背景

1 个答案: