网格跨度功能不适用于 Singularitygs 和 Rails答案

【问题标题】：The grid-span function don't work with Singularitygs and Rails网格跨度功能不适用于 Singularitygs 和 Rails
【发布时间】：2014-01-03 05:04:40
【问题描述】：

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

Rails 4.0.2
萨斯 3.2.13
指南针 0.12.2

我的文件如下：

宝石文件

...
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 函数不返回任何内容（空白）。这张图片代表了我的期望：

还有这个，我所拥有的：

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

【问题讨论】：

标签： ruby-on-rails ruby-on-rails-4 sass compass-sass singularitygs

【解决方案1】：

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

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

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

这会将输出样式设置为float，而您的grid-span divs 应该是float，正如您在预期结果中所显示的那样。

【讨论】：

谢谢，但不工作！首先，$output 有一个默认参数，它是“隔离”。其次，即使我想在全局范围内设置“float”，它也不起作用（尽管它应该）。最后，如果我调用像@include grid-span(4, 1, $output-style: 'float'); 这样的函数，它就会神奇地起作用！
我还没有测试过，但是如果你在包含语句之前定义变量会发生什么？
我已经测试过了，但是结果是一样的。（我什至重新启动 Rails 认为这可能是相关的。）

【解决方案2】：

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

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

http://sassmeister.com/gist/8226741

【讨论】：

提问者说grid-span 函数没有返回任何输出，所以这是某种Rails 设置问题。