Undefined variable: "$font-stack-system" (not using rails)

[ricardolopezg]

Hi,

I am new to Bourbon and have decided to use Bourbon, Neat and Bitters with my project. Currently, I am not using rails (per other closed issues on this topic) and have installed each gem globally. Afterwards, I installed them in my project directory and have come across this error after importing them into my main.scss file.

error stylesheets/base/_variables.scss (Line 6: Undefined variable: "$font-stack-system".)

Using versions:

• bourbon (5.0.0.beta.5, 4.2.6)
• neat (1.7.4)
• bitters (1.3.1)

If I comment out @import "base/base"; in my scss file all is well. Why am I getting this error?

any help is appreciated

[tysongach]

@ricardolopezg Hi! This variable is the one thing in Bitters 1.3 that requires Bourbon 5. So it seems like Bourbon 4.2.6 may have gotten installed in your project rather than 5.0.0. Can you open the main Bourbon manifest file (bourbon/_bourbon.scss), and see what version number is listed at the top?

[ricardolopezg]

Ah yes, you are right. version 4.2.6 was being used. Didn't realize that installing the gem would install both versions. I uninstalled v-4.2.6 and all is well.

Appreciate it!

[tysongach]

@ricardolopezg :+1:

[misterhtmlcss]

For those of you like me (Super rookies) - that come here looking for help, the above wasn't enough to move me forward. I had to then do this to solve the problem above:

If you had the gem installed (or you uninstalled it trying to figure out what to do), then you need to uninstall that version of Bourbon within the Gem itself. Use this command on a MacOS: sudo gem uninstall bourbon -v 4.2.6 FYI. In time the 4.x version may change, so be sure to do a 'gem list' command first to see which 4.x version is on there and then uninstall that version.

_Once the above is done, you are NOT finished, but you are 50% of the way there. _

Now go back to your project directory (if you were some where else for some reason) and delete the Bourbon folder within your project. You can do this via your Finder or Command line (CLI) if you like; it'll work either way. Then reinstall Bourbon in the directory of your project ex. 'bourbon install' on the CLI within your project folder and voila you are ready to go.

Startup Gulp or Grunt (whichever you prefer that was throwing the error) again and make a Sass file change, so that they'll run the automation; just to double check it all runs right. It should run fine at this point. If it doesn't run right, then it's probably a new Issue, so go fishing and good luck. :)

Lastly be sure your Bitters import isn't still commented out when you test the system after the 'fix', because otherwise all the feedback you are getting is invalid; yeah I left mine commented out the first time, but thankfully I fixed the problem anyway and it didn't matter.

PS. Tyson has a fix if you are super lazy which he posted in another related query and that is just remove the variable $font-stack-system from the bitters/base file __variables.scss and replace it _with $helvetica.

I hope this is cool that I wrote this @tysongach, since I'm new to GH and this world, I may be stepping on toes in my desire to be helpful and not even know it. Let me know if that's the case; learning one step at a time at my house right now.

[nunofreitasbotelho]

Make sure you make a 'gem list' to see your bourbon versions. I was trying to uninstall 4.2.6 when i had 4.2.7. Anyway, did what @misterhtmlcss said it worked fine. Didnt even had to rename the font myself. THanks.

[boompah]

Thanks for posting that @misterhtmlcss, I just ended up with the same error. I'm glad I was able to resolve it!

[max-arias]

One last thing I had to do, after removing bourbon 4.2.7 was to specify bourbon 5 (gem 'bourbon', '~> 5.0.0.beta.6') and then run bundle update bourbon

[JakubSvihla]

Hello, can I ask for help please?

I am using Bourbon 5.0.0.beta.8. Bitters version: 1.7.0

I have just installed bourbon, neat and bitters in my project directory without touching anything.

I get this error: _variables.scss (Line 2: undefined varible: "$font-stack-system".

Can anyone tell me how to get around this please?

Thank you!

ps: I tried changing "$font-stack-system" to "$helvetica" and it seems to work but it makes absolutely no sense to me that I install the latest versions of the libraries and they are not compatible? Or maybe I did something wrong? Please explain this somebody, thank you very much!

[tysongach]

@JakubSvihla How are you installing the libraries, through a package manager? If $helvetica works, it seems that somehow Bourbon 4.x is installed and not 5.0.

[JakubSvihla]

@tysongach I installed it through command line on windows. When I check "bouron -v" it replies Bourbon 5.0.0.beta.8.

Not sure what happened but never mind this now. I am using the latest font stacks that you provided the link for:https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/library/_font-stacks.scss and these seem to work.

But this leads me to another problem. When I am on the official Bourbon website, under the section of "Font Stacks", it seems to document the old font stack which doesn't work in Bourbon 5. Here is the link: http://bourbon.io/docs/#font-stacks

It gives this as an example: font-family: $helvetica;

and that doesn't work for me in Bourbon 5.

Thank you for your help and awesome Bourbon! I like it, I am just confused about these stacks.

[johnatanuribe]

I have the same issue, I changed $font-stack-system to source sans pro for now and it seems to be working

[tysongach]

But this leads me to another problem. When I am on the official Bourbon website, under the section of "Font Stacks", it seems to document the old font stack which doesn't work in Bourbon 5.

5.0 is still in beta, so the website reflects the 4.x release. If you’re using our CLI (i.e. you ran bourbon install from the command line), you can always check Bourbon’s primary manifest file for the version number:

https://github.com/thoughtbot/bourbon/blob/7ef23d20624af282c5d7fd963814471593880498/core/_bourbon.scss#L1

@johnatanuribe Let us know how you’re installing Bourbon (CLI, package manager, etc.) so we can help.

[JakubSvihla]

@tysongach thank you veru much for your help