grid-span函数不适用于Singularitygs和Rails

Question

所以，首先我有以下配置：

• Rails 4.0.2
• Sass 3.2.13
• 指南针0.12.2

我的文件如下：

---

的Gemfile

...
gem 'sass-rails'
gem 'compass-rails'
gem 'breakpoint'
gem 'singularitygs'
...

---

application.css.scss

/* Mixins */
@import 'compass';
@import 'breakpoint';
@import 'singularitygs';

/* Variables */
$grids: 12;
$gutters: 1/3;

/* Styles */
* { @include box-sizing('border-box'); }

.container {
  @include background-grid;
  margin: 0 auto;
  min-height: 100%;
  max-width: 960px;

  @include clearfix;
}

header {
  .logo { @include grid-span(4, 1); }
  .user { @include grid-span(4, 8); }
}

---

HTML

<header>
  <div class="container">
    <div class="logo">Logo</div>
    <div class="user">User</div>
  </div>
</header>

---

grid-span函数没有返回任何内容（空白）。此图像代表了我的期望：

这就是我所拥有的：

有谁知道如何解决它才能正常工作？

Answer 1

看来你唯一缺少的就是Output Style，因为div将要呈现默认值，这是一个堆叠在另一个之上的。

更新您的application.css.scss变量部分，如下所示（此处不需要定义，但这是更合理的地方！，即使用$grids和$gutters）：< / p>

/* Variables */
$grids: 12;
$gutters: 1/3;
$output: 'float';

这会将输出样式设置为float，而grid-span div应设为float，如您在预期结果中所示。

Answer 2

嗯，如果你在sassmeister上尝试你的设置就行了。我唯一改变的是：

@include grid-span（4,8）; 至 @include grid-span（4,9）; 如果你从第8列开始，如果你的跨越网格是4列宽，你只能进入第11列。但除此之外，它取决于你的预期结果：

http://sassmeister.com/gist/8226741