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

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.

score 2 · Answer 1 · answered Oct 27 '14 at 20:54

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?).

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

1 Answers1