Search code examples
sasssusy-compass

Susyone no longer working as expected after update


I have been running susy-2.1.2 with @import "susyone"; instead of @import "susy";. Everything was working. I had to update compass through GEM which meant Sass had to update, which meant susy had to update too. So now i'm running susy-2.2.1.

I have this css:

.dropdown .susy_container{
    //Get ready for grids with bigger screen sizes
    $total-columns: 12;  // a 12-column grid
    $column-width: 100em;  // each column
    $gutter-width: 1em !global;  // gutters between columns
    $grid-padding: 0em !global ;
    @include container;
}

With the old version I would get this:

.dropdown .susy_container {
   max-width: 1211em;
   _width: 1211em;
   padding-left: 0em;
  padding-right: 0em;
  margin-left: auto;
  margin-right: auto;
}

With the new version I get this:

.dropdown .susy_container {
  max-width: 59em;
  _width: 59em;
  padding-left: 0em;
  padding-right: 0em;
  margin-left: auto;
  margin-right: auto;
}

I also have strange gutters between columns. I am 100% sure I am using susyone.scss.

I wish I could go back to the old version of susy, but I get this:

Gem::LoadError on line ["2064"] of /Library/Ruby/Site/2.0.0/rubygems/specification.rb: Unable to activate susy-2.1.2, because sass-3.4.9 conflicts with sass (~> 3.3.0)

Solution

  • This isn't a change in Susy, it's a change in Sass. Looks like you need the !global flag on all the settings for them to take effect:

    .dropdown .susy_container{
        //Get ready for grids with bigger screen sizes
        $total-columns: 12 !global;  // a 12-column grid
        $column-width: 100em !global;  // each column
        $gutter-width: 1em !global;  // gutters between columns
        $grid-padding: 0em !global ;
        @include container;
    }