Question

以下代码将我的侧边栏优先一列放在屏幕左侧。

.has-sidebar-first {
.l-content {
  @include span-columns(15 omega, 16); // Span 15 out of 16 columns.
  @include push(1, 16);  // Push element by adding 1 out of 16 columns of left margin.
}
.l-region--sidebar-first {
  @include span-columns(1, 16); // Span 1 out of 16 columns.
  @include pull(1, 16); // Pull element by adding 15 out of 16 columns of negative left margin.      
}

}

侧边栏优先应占据第一列，内容应占用接下来的15。我已经拉设置1到16，但它要么不合适，要么完全消失。 layout

有什么建议吗？

Update1 ：这是完整的scss布局（包括来自Eric Meyer的建议（该人自己！）将侧边栏优先放置在左侧的更远页面。它似乎与 l-content 的宽度相同。

@import "susy";

// Susy Variables

// Set consistent vertical and horizontal spacing units.
$vert-spacing-unit: 20px;
$horz-spacing-unit: 1em;

// Define Susy grid variables mobile first.
$total-columns: 4;
$column-width: 4em;
$gutter-width: $horz-spacing-unit;
$grid-padding: 5px;

$container-style: magic;
$container-width: 1200px;

// Susy Media Layouts @see http://susy.oddbird.net/guides/reference/#ref-media-layouts
$tab: 44em 12; // At 44em use 12 columns.
$desk: 70em 16; // At 70em use 16 columns.

.l-header,
.l-main,
.l-footer {
  @include container; // Define these elements as the grid containers.
  margin-bottom: $vert-spacing-unit;
}

.l-region--highlighted,
.l-region--help,
.l-region--sidebar-first,
.l-region--sidebar-second {
  margin-bottom: $vert-spacing-unit;
}

@include at-breakpoint($tab) { // At a given Susy Media Layout, use a given amount of columns.
  .l-header,
  .l-main,
  .l-footer {
    @include set-container-width; // Reset only the container width (elements have already been declared as containers).
  }

  .l-branding {
    @include span-columns(4, 12); // Span 4 out of 12 columns.
  }
  .l-region--header{
    @include span-columns(8 omega, 12); // Span the last (omega) 8 columns of 12.
  }
  .l-region--navigation {
    clear: both;
  }

  .has-sidebar-first,
  .has-sidebar-second,
  .has-two-sidebars {
    .l-content {
      @include span-columns(7, 12); // Span 7 out of 12 columns.
      @include push(1, 12);  // Push element by adding 1 out of 12 columns of left margin.
    }
    .l-region--sidebar-first, {
      @include span-columns(1, 12); // Span the 1 columns of 12.
    }
    .l-region--sidebar-second {
      @include span-columns(4 omega, 12); // Span the last (omega) 4 columns of 12.
    }
    .l-region--sidebar-first {
      @include pull(8, 12); // Pull element by adding 8 out of 12 columns of negative left margin.
    }
    .l-region--sidebar-second {
      clear: right;
    }
  }
}

@include at-breakpoint($desk) {
  .l-header,
  .l-main,
  .l-footer {
    @include set-container-width; // Reset only the container width (elements have already been declared as containers).
  }

  .l-branding {
    @include span-columns(6, 16); // Span 6 out of 16 columns.
  }
  .l-region--header{
    @include span-columns(10 omega, 16); // Span the last (omega) 10 columns of 16.
  }

  .has-sidebar-first {
    .l-content {
      @include span-columns(15 omega, 16); // Span 15 out of 16 columns.
    }
    .l-region--sidebar-first {
      @include span-columns(1, 16); // Span 1 out of 16 columns.
    }
  }
  .has-sidebar-second {
    .l-content {
      @include span-columns(12, 16); // Span 12 out of 16 columns.
    }
    .l-region--sidebar-second {
      @include span-columns(4 omega, 16); // Span the last (omega) 4 columns of 16.
      clear: none;
    }
  }

  .has-two-sidebars {
    .l-content {
      @include span-columns(10, 16); // Span 10 out of 16 columns.
      @include push(1, 16);  // Push element by adding 1 out of 16 columns of left margin.
    }
    .l-region--sidebar-first {
      @include span-columns(1, 16); // Span 1 out of 16 columns.
    }
    .l-region--sidebar-second {
      @include span-columns(5, 16); // Span 5 out of 16 columns.
    }
    .l-region--sidebar-first {
      @include pull(11, 16); // Pull element by adding 11 out of 16 columns of negative left margin.
    }
    .l-region--sidebar-second {
      @include omega; // This element spans the last (omega) column.
      clear: none;
    }
  }
}

.has-two-sidebars 正在按需运行。我只希望在 @include at-breakpoint（$ desk）时修复 .has-sidebar-first 。如果它的设置方式存在固有的错误，那么我将不得不改变这个地段，但我希望只是在没有侧边栏的桌面上查看时更改布局。

由于

更新2 根据建议添加margin-left: 0;，这是添加的。

.has-sidebar-first {
.l-content {
  @include span-columns(15 omega, 16); // Span 15 out of 16 columns.
}
.l-region--sidebar-first {
  @include span-columns(1, 16); // Span 1 out of 16 columns.
  margin-left: 0;
}

}

虽然现在将“side-first”与正确的列对齐，但它会显示在内容下方，如图所示： Displaced sidebar 其余的代码是一样的。两个侧边栏选项仍然正确显示。有什么建议吗？

解决方案： 根据埃里克的建议，我需要清除并事先声明推拉。所以正确的代码是：

.has-sidebar-first {
.l-content {
  @include span-columns(15 omega, 16); // Span 15 out of 16 columns.
  margin-left: 0;
}
.l-region--sidebar-first {
  @include span-columns(1, 16); // Span 1 out of 16 columns.
  margin-left: 0;
}

由于

Answer 1

摆脱push和pull。两者都不需要。你的omega项目是浮动的，另一项是向左浮动的，所以两者都会完全落到位，而不需要任何推/拉帮助。

<强>更新：

您在其中一个较小的断点处的.l-region--sidebar-first处设置了一个拉集，该断点仍在较大的断点处应用。您只需要在margin-left断点处将0设置为$desk。

Susy：推（前）和拉（

1 个答案: