0

私はこれらのスタイルを持っています:

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

    li
      +gallery(2)

グリッド アイテムが正しく並んでいます。この場合、それぞれ<li>が 8 つの列のうちの 2 つにまたがっていますが、上記のようにグリッドの背景表示をオンにすると、次の出力が得られます。

ここに画像の説明を入力 なぜこれをやっているのですか？確かに、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