以下代码将我的侧边栏放在屏幕左侧的第一列。
.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 列,但它要么不合适,要么完全消失。
有什么建议吗?
更新1:这是完整的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;
}
}
虽然这现在将“侧优先”与正确的列对齐,但它显示在内容下方,如图所示: 其余代码是相同的。两个侧边栏选项仍然正确显示。有什么建议么?
解决方案: 根据 Eric 的建议,我需要清除之前声明的 push and pulls。所以正确的代码是:
.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;
}
谢谢