我正在使用 semantic.gs 为网页创建网格。我注意到无论我做什么,我都没有任何“排水沟”,这意味着在 CSS 中边距计算为 0,尽管默认值为 20px。
于是我退后一步,尝试复现这个非常简单的官方例子:
http://semantic.gs/examples/fixed/fixed.html
我尝试的输出在这里:
如您所见,再次没有排水沟。标记是相同的,输出 CSS 不是。我的输出 CSS 总是显示 0 的边距。您可能会认为这可能是由于我的输入与示例不同,但据我所见,事实并非如此。我正在使用 SCSS,如下所示:
@import 'compass';
@import 'grid';
// Specify the number of columns and set column and gutter widths
$columns: 12;
$column-width: 60;
$gutter-width: 20;
// Uncomment the definition below for a percentage-based layout
// $total-width: 100%;
////////////
// LAYOUT //
////////////
// center the contents
div.center {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
// header
header#top {
@include column(12);
margin-bottom: 1em;
}
// main and sidebar
#maincolumn {
@include column(9);
}
#sidebar {
@include column(3);
}
我已经在演示中剪断了重置 CSS 代码和设置颜色样式的 CSS。相信我,正如您在小提琴中看到的那样,它们是官方演示的精确复制和粘贴。
“grid”导入是grid mixins的官方下载。我没有改变它。这里最大的谜团是为什么使用相同的标记和 SCSS 我会得到不同的结果?
难道是因为我的编译过程?我正在使用 Scout 应用程序来监控我的 SCSS 文件夹。它拾取对它的任何更改并将其编译为 CSS。