Search code examples
sassbourbonmiddleman-4

Sass - undefined error $helvetica

Working with middleman and using Bourbon, Neat and Bitters. Once I start the server, I get following error message - 

Error compiling CSS asset
Sass::SyntaxError: Undefined variable: "$helvetica"
in (source/stylesheets/base.css.scss: 1)

source/stylesheets/base/_variables.css.scss:1

I've looked into open issues and other thoughtbot forums and tried all the resolution steps mentioned there without any success

My base.css.scss is as follows - 

@charset "utf-8";

@import "bourbon";
@import "base/base";
@import "neat";

@import "partials/layout";
@import "partials/nav";
@import "partials/footer";

@import "highlight";

_base.css.scss -

@import "variables";
@import "grid-settings";
@import "buttons";
@import "forms";
@import "lists";
@import "tables";
@import "typography";

and _variables.css.scss 

$helvetica: 'Oxygen', $helvetica;

// Typography
$base-font-family: $helvetica;
$heading-font-family: $base-font-family;

// Font Sizes
$base-font-size: 1em;

// Line height
$base-line-height: 1.5;
$heading-line-height: 1.2;
...
Solution

  • I think I had the same issue as yourself.

    Looks like they got rid of the variable $helvetica if you are using the latest version of bitters.

    https://github.com/thoughtbot/bitters/releases/tag/v1.3.0

    You will probably want to set bitters in your gemfile to an earlier release (I think 1.2 works just not 1.3) and run these commands in source/stylesheets bitters remove then bitters install again to get that to work.