如何让Susy + pad mixin工作？

Question

我想使用+pad在p上添加一些填充。当我尝试使用+pad添加填充时p延伸到我希望p元素停止的位置。这是我的意思的屏幕截图

你可以看到p黄色背景延伸到第9列中间，这是图片停止的位置。我希望p停在那里。当我使用+pad时，它总是扩展它。 +prefix

也是如此

这是我的Susy代码：

@import compass
@import compass/css3
@import compass/layout
@import compass/utilities/lists/bullets
@import susy
@import normalize
@import base
@import media 

/* Susy Settings */

// $total-columns  : 5            
// $column-width   : 4em            
// $gutter-width   : 1em           
// $grid-padding   : $gutter-width

$total-columns  : 4
$column-width   : 60px            
$gutter-width   : 20px           
$grid-padding   : $gutter-width

$container-style: fluid

$tablet : 9
$desktop : 14

// Susy-grid-background override to draw out horizontal lines
=susy-grid-background       
  +grid-background($total-columns, $column-width, $gutter-width, $base-line-height, $gutter-width, $force-fluid: true)          
/* -------------------DESKTOP ----------------------------------*/

+at-breakpoint($desktop)
  #page
    +container
    +susy-grid-background


  header
    +container
    +pull(.3)
    position: fixed
    left: 0
    right: 0
    top: 0
    height: 0
    padding-top: 0
    z-index: 3

    h1.logo
      +span-columns(2)
      font-size: 12px
      // background: green
      +hide-text
      margin-top: 0

      a
        // +span-columns(2)

        svg
          // background: red
          +leader(1)
          float: right
          width: 97px
          height: 38px

    .pagenav
      +span-columns(2)
      +leader(.5)
      clear: both
      // background: rgba(150,200,250,.3)

      li
        margin-bottom: 1em
        float: right
        clear: both
        a
          padding: 5px



  .main
    +span-columns(12 omega)
    // +leader(2)
    z-index: 1
    position: relative
    // background: rgba(1,240,200,.3)

    .image-group-title
      +span-columns(10, 14)
      padding: 1em 0
      +pad(1,0,10)
      +trailer(.5)


    // p
    //   +span-columns(4 omega, 14)

    img 
      +span-columns(10, 14)
      // clear: both

    .img-4-wide
      +span-columns(5, 14)


  .tile
    +isolate-grid(4, 12)
    +fluid-ratio(1/1, columns(4,12))


  #footer
    margin: 0 1em
    // background: pink
    height: 80px   

Answer 1

一些事情：

1. 除非您使用border-box框大小调整模型，否则会将填充添加到跨度宽度。如果您希望外部跨度为9，前缀为1，则需要跨越8并添加前缀。

2. 相对填充基于父元素宽度，而不是当前元素，因此span-columns和pad或prefix应始终传递相同的上下文参数。目前，这是错误的：

   .image-group-title
     +span-columns(10, 14)
     padding: 1em 0
     +pad(1,0,10)
     +trailer(.5)
   

   它应该是：

   .image-group-title
     +span-columns(10, 14)
     padding: 1em 0
     +prefix(1, 14)
     +trailer(.5)
   

在您的示例中不清楚哪些代码适用于相关的p，因此很难知道我是否真的回答了问题，但我希望这有帮助。