The grid-span function don't work with Singularitygs and Rails

Question

So, first of all I have the following configuration:

• Rails 4.0.2
• Sass 3.2.13
• Compass 0.12.2

And my files are below:

---

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>

---

The grid-span function is returning nothing (blank). This image represents what I expect:

And this, what I have:

Does anyone have any idea how can I solve it to work properly?

Answer 1

It appears that the only thing you're missing is the Output Style, because of which the divs are going to render default which is one stacked on top of other.

Update your application.css.scss's variables section as follows (Not required to be defined here but this is where it would make more sense!, i.e. with $grids and $gutters):

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

This will set the output style to float and your grid-span divs should float as you've shown in your expected result.

Answer 2

hm if you try your setup on sassmeister it works. the only thing i've changed was:

@include grid-span(4, 8); to @include grid-span(4, 9); cuz if you start at column 8 you get only to column 11 if your spanned grid is 4 columns wide. but aside that it comes to your expected result:

http://sassmeister.com/gist/8226741