linear-gradient not a string for `str-slice') in bourbon - css

Question

While I was creating theme with Bourbon, I got the error below:
error sass/screen.scss (Line 18 of sass/bourbon/css3/_background.scss: \
$string: linear-gradient(10deg, #217142,#214271) is not a string for `str-slice')
Here's code in _background.scss, as it's on its Github repo:
#mixin background($backgrounds...) {
$webkit-backgrounds: ();
$spec-backgrounds: ();
#each $background in $backgrounds {
$webkit-background: ();
$spec-background: ();
$background-type: type-of($background);
#if $background-type == string or list {
$background-str: if($background-type == list, nth($background, 1), $background);
# line 18 just below:
$url-str: str-slice($background-str, 0, 3);
$gradient-type: str-slice($background-str, 0, 6);
#if $url-str == "url" {
$webkit-background: $background;
$spec-background: $background;
}
}
}
}
I was using Sass 3.3.14 & Compass 1.0.0.rc.1 to create the theme in order to get full benefits of bourbon.
UPDATE:
(Oops, I've forgotten telling about Neat or Bitters. I am using them, too. Sorry.)
I've updated files as being described on Bitters' guide on Github:
#import 'compass';
#import 'bourbon/bourbon';
#import 'base/grid-settings';
#import 'neat/neat';
#import 'base/base';
#import 'custom/custom';
But same error occurs.

Answer 1

I've got similar error
error (Line 18 of bourbon/css3/_background.scss: $string: linear-gradient(#c73b3c,#b8201f) is not a string for `str-slice')
when added the #import 'compass'; in a working bourbon/neat/bitters environment. removing it fixed the problem. importing after thoughtbot's libraries gives bunch of warnings instead of errors but working.
#import 'bourbon/bourbon';
#import 'base/grid-settings';
#import 'neat/neat';
#import 'base/base';
#import 'custom/custom';
#import 'compass';
The problem seems to be related to the $base-line-height variable.
In compass $base-line-height set to $base-line-height 24px;
In bourbon $base-line-height set to $base-line-height: 1.5;
when compass loaded after bourbon you get a WARNING: $base-line-height must resolve to a pixel unit.
because bourbon set it to 1.5.
If you try to add $base-line-height: 24px; before the #import 'compass'; command you get error:
(Line 36 of /usr/local/lib/ruby/gems/2.1.0/gems/compass-core-1.0.1/stylesheets/compass/typography/_vertical_rhythm.scss: Incompatible units: 'em' and 'px'.)
because $base-font-size is also conflicting between the libraries.
A solution I found is to set the imports like this:
#import 'bourbon/bourbon';
#import 'base/grid-settings';
#import 'neat/neat';
#import 'base/base';
#import 'custom/custom';
$base-font-size: 16px;
$base-line-height: 24px;
#import 'compass';
Now you have both playing together. I couldn't make it to work other way around where compass is imported before bourbon. I guess this conflict should be fixed at libraries level (bourbon?).