Undefined variable "$large-screen"

[wighawag]

Hi,

Just trying out the bourbon/neat/bitters/refills combo and after setting a basic project injecting only the first navigation pattern, I get the following error : Undefined variable "$large-screen"

Is the docs not up to date or am I doing something wrong?

[wighawag]

Looking deeper I found that there is some comment related to the use of both neat and bitters

In base/_base.scss I uncommented the line @import 'grid-settings' as being told (and made sure this is imported before neat)

Then since I am not suing rails : In base/_grid_settings I imported the neat-helpers using : '../neat/neat-helpers'

but I now get this error :

error base_grid-settings.scss (Line 10: Invalid CSS after "...at Breakpoints": expected selector or at-rule, was "$medium-screen:...")

[wighawag]

Following the doc on https://github.com/thoughtbot/bitters I also got the same error :

error base_grid-settings.scss (Line 10: Invalid CSS after "...at Breakpoints": expected selector or at-rule, was "$medium-screen:...")

[tysongach]

Hello!

The documentation is up-to-date. The errors you’re getting are usually related to @import’s being set up improperly.

Can you paste in the code or a screenshot of your main Sass manifest file? The one where you’re importing Bourbon, Neat and Bitters? This will help us debug and make sure we are all on the same page.

It should look something like this:

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

[wighawag]

Sorry , that was just a missing semi colon (when I changed base/_grid_settings to import neat-helpers using : '../neat/neat-helpers' (when not using rails). I forgot to add the semi colon.

[kevohagan]

I ran into the same problem!

I would suggest updating docs :

Expliciting mentioning that when using bitters with neat, you have to uncomment @import 'grid-settings'

Neat Settings -- uncomment if using Neat -- must be imported before Neat

[AdrienGiboire]

I actually did uncomment @import 'grid-settings' but I'm still getting the error.

[AdrienGiboire]

For now, I commented in related instructions so I can move forward.

[tysongach]

@kevohagan Our installation instructions for Bitters do mention that you should uncomment @import "grid-settings"; in _base.scss.

@AdrienGiboire Can you describe your project setup? What does you main manifest file look like with all the @import’s? What versions of Bourbon, Neat, Bitters and Refills are you using?

[AdrienGiboire]

Here are the details:

neat (1.6.0)
bourbon (4.0.2)
bitters (0.10.0)

@import 'bourbon/bourbon';
@import 'base/base';
@import 'neat/neat';

/* All my custom CSS comes after */

[tysongach]

@AdrienGiboire Those @import’s look fine. What version of Sass are you using and how is it being compiled?

Can you paste in your _grid-settings.scss and _base.scss?

Also, the original issue created here was resolved by finding a missing semi-colon. So, it may sound silly, but just double check proper syntax is in place.

[fakefarm]

I got tripped up by 2 things;

Undefined variable: "$base-body-color".

I'm using bitters and it didn't have $base-body-color so I added that to _variables.scss

Once I added that, it lead me to;

Undefined variable: "$large-screen".

As @tysongach explained, it was commented out. Once I uncommented @import 'grid-settings'; in _base.scss all was smooth.

@tysongach, I'd be happy to submit PR's (one to Refills Readme, and other for Bitters missing $base-body-color) if you need help.

Setup

Refills is built on top of ThoughtBot's front end framework suite that requires some management. As mentioned in the Readme, Refills uses Bourbon, Neat, and Bitters. Here are the steps to setup a Rails project.

Add these to application.scss

@import 'bourbon';
@import 'neat';
@import 'base/base';

Bitters related changes.

Check _base.scss

By default, @import 'grid-settings'; is commented out. Make sure you uncomment it like so;

// line 8
@import 'grid-settings';

Add $base-body-color

Go to _variables.scss and add a $base-body-color: black; (Your base color can be anything you want. black is here to start you off.)

[tysongach]

@woodall The $base-body-color variable in Refills is just out-of-date. A recent Bitters update changed the name to $base-background-color to be more clear. It’s just a versioning issue and we are working on making that more maintainable in the future.

Also, when using Refills, the REAME simply specifies to install Bitters as one of the dependencies. When you do install Bitters, the instructions call for you to uncomment the _grid-settings import.

[fakefarm]

@tysongach, thanks for clarifying.

I started installing the TB Suite from Refills.

Refill's link to Install Bitters referenced the Bitter's homepage, which their install instructions are;

Install Bitters: gem install bitters Install Bourbon and Neat (optional). Then cd to your Sass directory and run: bitters install The generated folder will contain all Bitters files. Import Bitters after Bourbon and Neat in your application.css.scss: @import "base/base"; You’re all set. Now add to or remove Bitters styles.

I don't see any mention of the uncomment part there (off the bat) nor is it in the link from Refills to Neat. (But, I knew you were referencing something, so I dug more and found it in bitter's step 5.)

When using Neat, uncomment the following line in _base.scss:
@import "grid-settings";

I was approaching the project with Refills in mind so I missed that.

Is it possible that Bitters homepage instructions could also use a line like;

_Plan on using Refills? In _base.scss Uncomment_

@import 'grid-settings';

Thanks again for your help and awesome gems.

[tysongach]

@woodall Yep, you’re right. I bet the Refills README could be better by pointing people to the GitHub repos of Bourbon, Neat & Bitters instead of the respective marketing website. The Bitters website simply says “In-depth instructions on GitHub”—which is where the uncomment step is—and I can see why that is confusing.

So first, I think we should mirror the Bitters GitHub documentation over to its marketing site. Then, make sure the Refills documentation is more clear and points to the GitHub pages for its dependencies.

[AdrienGiboire]

@tysongach Sass version:

Sass 3.4.2 (Selective Steve)

_base.scss:

// Bitters v0.10.0
// http://bitters.bourbon.io

// Variables
@import 'variables';

// Neat Settings -- uncomment if using Neat -- must be imported before Neat
@import 'grid-settings';

// Mixins
@import 'mixins/flash';

// Extends
@import 'extends/button';
@import 'extends/clearfix';
@import 'extends/hide-text';

// Typography and Elements
@import 'typography';
@import 'forms';
@import 'tables';
@import 'lists';
@import 'flashes';
@import 'buttons';

_grid-settings.scss:

@import '../neat/neat-helpers'; // or '../neat/neat-helpers' when not in Rails

// Neat Overrides
$column: 80px;
$gutter: 20px;
$grid-columns: 20;
$max-width: em(1180);

// Neat Breakpoints
$mobile-screen:   em(640);
$portrait-screen: em(1023);
$tablet-screen:   em(1024);
$desktop-screen:  em(1240);

$mobile:    new-breakpoint(max-width $mobile-screen 4);
$portrait:  new-breakpoint(min-width $mobile-screen max-width $portrait-screen 12);
$tablet:    new-breakpoint(min-width $tablet-screen max-width $desktop-screen 12);
$desktop:   new-breakpoint(min-width $desktop-screen 20);

//$visual-grid: true;
//$visual-grid-index: front;

[tysongach]

@AdrienGiboire And how is your Sass being compiled? What does your main manifest file look like? Are you using other frameworks alongside Refills?

[OSPK]

i faced the same problem, for me this was the solution:

Note: If you are using Bitters and Neat without Ruby on Rails, you need to change the import for neat->helpers inside _grid-settings.scss to "../neat/neat-helpers".

[slothyrulez]

+1 for the semicolon...

[acandael]

I ran into the same problem. Solved the issue by adding a semi-colon after:

@import "../neat/neat-helpers";

in my base/_grid-settings.scss file