我刚刚开始使用 Drupal、Omega 4 主题的响应式设计技术，并且想使用奇异网格系统。我不太了解 CSS（基本原则是的，微妙之处不是），而 SASS 似乎是逃避一些更神秘的特性的好方法（有点像 jQuery 帮助你避免使用 Javscript）。因为我真的是一个初学者，所以我想我会从一个尽可能简单的虚拟页面开始。所以，这里是 HTML：
<html>
<head>
<title>Singularity HTML Demo</title>
<link rel="stylesheet" href="stylesheets/test-grid_1.css">
</head>
<body>
<div id="page">
<h1>Page tests_1</h1>
<div id="foo">
<h2>Foo</h2>
<p><p>Aliquam nulla metus, laoreet non felis ut, commodo laoreet nulla. </p></p>
</div>
<div id="bar">
<h2>Bar</h2>
<p>Morbi volutpat justo ante, et laoreet est porttitor id. Nullam rhoncus ipsum leo, sed tincidunt ante consequat in.</p>
<p>Quisque porttitor tincidunt hendrerit. Nulla et urna nisi. Fusce vulputate aliquet posuere. Cras tempor ante vel turpis scelerisque mollis. In bibendum augue in tincidunt vulputate. Donec accumsan sapien et molestie sodales. Maecenas ut arcu et arcu congue rhoncus. Suspendisse potenti. Nulla vehicula est ut ante semper lobortis. Maecenas sit amet porta mi, nec mattis dui. Curabitur tempus, magna a volutpat auctor, tellus diam pretium sapien, a accumsan augue lectus et est. Quisque sollicitudin metus tincidunt massa fermentum; non varius libero bibendum.</p>
</div>
<div id="baz">
<h2>Baz</h2>
<div>
<p>Baz</p>
<p>Vestibulum quis tristique arcu. Cras nec est aliquet, vehicula dolor sed, fermentum eros. Maecenas et commodo diam. Aenean egestas nulla a dolor aliquet pellentesque. Nunc enim tellus, sagittis sit amet ipsum nec, bibendum dictum nisl. Nam sollicitudin quis orci sed consequat. Nam et imperdiet ipsum, aliquam cursus nulla. Morbi erat magna, rhoncus vel velit vel, sollicitudin imperdiet orci. Quisque posuere at leo in pellentesque. Vestibulum ornare nulla odio, id mollis lorem blandit eget. Donec est sem, adipiscing eu ligula at, blandit lobortis magna. Nam tempus, risus vitae lacinia consectetur, leo orci fringilla arcu, facilisis blandit metus leo eget eros. Donec pellentesque est eget nulla ultricies, nec placerat risus sagittis. Nulla elementum metus nisi, eget sagittis risus commodo vitae. Pellentesque imperdiet porta vestibulum!</p>
</div>
</div>
<div id="qux"><p>Qux</p></div>
<div id="waldo"><p>Waldo</p></div>
<div id="garfield"><p>Garfield</p></div>
<div id="dilbert"><p>Dilbert</p></div>
</div>
</body>
</html>
我做了一个 sass 样式表，一开始只是将所有 div 显示在一个列中，一个列在另一个列下，这很有效（不难！）。我想发布一张图片来表达我的意思，但显然我不能！
然后，我尝试添加断点并尝试修改 sass 代码，使其显示在 2 列网格上，每个 div 交替显示在左侧和右侧。这是我使用奇异性的 sass 代码：
@import "singularitygs";
$include-border-box: true;
$break: 500px;
$break2: 800px;
$break3: 1200px;
$include-clearfix: true;
$grids: add-grid(1);
$grids: add-grid(2 at $break);
$grids: add-grid(2 8 2 1 at $break2);
$grids: add-grid(12 at $break3);
$gutters: add-gutter(1/6);
body {
margin: 0;
padding: 0;
@include background-grid;
}
#foo {
background-color: red;
color: yellow;
@include grid-span(1, 1);
@include breakpoint($break) {
@include grid-span(1, 1);
}
}
#bar {
background-color: green;
color: yellow;
@include grid-span(1, 1);
@include breakpoint($break) {
@include grid-span(1, 2);
}
}
#baz {
background-color: purple;
color: whitesmoke;
@include grid-span(1, 1);
@include breakpoint($break) {
@include grid-span(1, 1);
}
}
#qux {
background: yellow;
@include grid-span(1, 1);
@include breakpoint($break) {
@include grid-span(1, 2);
}
}
#waldo {
background: blue;
color: whitesmoke;
@include grid-span(1, 1);
@include breakpoint($break) {
@include grid-span(1, 1);
}
}
#garfield {
background: orange;
@include grid-span(1, 1);
@include breakpoint($break) {
@include grid-span(1, 2);
}
}
#dilbert {
background: cyan;
@include grid-span(1, 1);
@include breakpoint($break) {
@include grid-span(2, 1);
}
}
当断点启动时，Waldo Garfield 和 Qux 已经全部移动到了显示屏的顶部——Foo 已经完全不可见并被覆盖。我通过摆弄“清晰：两者/左/右”来获得接近我想要的东西，但它是无可救药的经验性的，我很确定它不可靠。我肯定错过了一些东西，但如果有人能告诉我什么，我将不胜感激！