0

我正在使用 semantic.gs 为网页创建网格。我注意到无论我做什么，我都没有任何“排水沟”，这意味着在 CSS 中边距计算为 0，尽管默认值为 20px。

于是我退后一步，尝试复现这个非常简单的官方例子：

http://semantic.gs/examples/fixed/fixed.html

我尝试的输出在这里：

http://jsfiddle.net/QXpcq/

如您所见，再次没有排水沟。标记是相同的，输出 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。

4

0 回答 0