ruby-on-rails - 网格跨度功能不适用于 Singularitygs 和 Rails

Question

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

• 导轨 4.0.2
• 萨斯 3.2.13
• 指南针 0.12.2

我的文件如下：

---

宝石文件

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

---

应用程序.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

嗯，如果你在 sassmeister 上尝试你的设置，它就可以工作。我唯一改变的是：

@include 网格跨度(4, 8); @include 网格跨度(4, 9); 因为如果你从第 8 列开始，如果你的跨越网格是 4 列宽，你只能到第 11 列。但除此之外，它涉及您的预期结果：

http://sassmeister.com/gist/8226741

Answer 2

看来您唯一缺少的是s Output Style，因此divs 将呈现默认值，即一个堆叠在另一个之上。

如下更新您application.css.scss的变量部分（不需要在此处定义，但这是更有意义的地方！，即使用$gridsand $gutters）：

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

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