Menu icon Foundation
SCSS Variables - Where are they?

After updating the gem, I opened the foundation_and_overrides.scss file where I previously edited all my variables, only to find that they have been moved. Where have they gone?

Foundation Docs mentions a _settings.scss file where variables can be changed and customized, however, my project does not contain a _settings.scss file or any other SASS files for that matter. Do I need to manually add them? Shouldn't they have come along with the updated gem?

Thanks for the help in advance!

scssSasssettingsvariables

After updating the gem, I opened the foundation_and_overrides.scss file where I previously edited all my variables, only to find that they have been moved. Where have they gone?

Foundation Docs mentions a _settings.scss file where variables can be changed and customized, however, my project does not contain a _settings.scss file or any other SASS files for that matter. Do I need to manually add them? Shouldn't they have come along with the updated gem?

Thanks for the help in advance!

Michael Lee over 5 years ago

I sent an email to Zurb earlier today. They responded with "it's being added as soon as possible".

For now you can find a few variable overrides in _global.scss

Scott Anderson over 5 years ago

Thanks Michael. Unfortunately, I don't even have a _global.scss file. I guess I'll wait for an update.

Asif over 5 years ago

For now I pulled one which I was using with Foundation 4 and everything seems to be working well. There might be some things missing in there but until we get one from Team Foundation I think it would be ok.

Andrew Young over 5 years ago

Warning about altering _global.scss.

Any file in the "bower_componenets" directory will be updated when you do a foundation update. If you alter _global.scss (which is in the bower folder) your changes can get overwritten or there could be a conflict during the update.

John Rodkey over 5 years ago

Hi Guys! The variable are located in bower_components > foundation > scss > foundation > _global.scss

To change the global variables you will simply go in to the scss folder in your project root and modify _settings.scss

For example: to change to the "primary color"
project root > _settings.scss
$primary-color: #myColorValue !default;

save file. If you have compass you should use compass watch to build your new css file. your new css file with your new "primary color" will be located in: project root > stylesheets > app.css

Hope this helps you.

John Rodkey over 5 years ago

correct on my typo

For example: to change to the "primary color"
project root > _settings.scss
$primary-color: #myColorValue !default;

------ Should be ---------------------------------------

For example: to change the "primary color"
project root > scss > _settings.scss
$primary-color: #myColorValue !default;

Scott Anderson over 5 years ago

To be more specific, can anyone list out the steps that should be taken to update a Rails project currently using Foundation 4? The foundation-rails gem seems to give us a half-baked update (without critical SASS files), and the Foundation documents are very confusing.

Are we supposed to update the gem and then manually migrate the Javascript and then manually install bower and then manually update Foundation with Compass? Or, is the foundation-rails gem supposed to do everything?

Cheyne over 5 years ago

I too am having problems trying to migrate from V4 to V5. What happened? Now I can't see any config, im madly googling trying to find out why things are broken and i cant find where to configure it.

Example, now none of my em-calc based variables work. Am I supposed to include something?

I dug through the asset files , I found the settings file.. But something feels wrong if I have to dig this deep for it.

https://github.com/zurb/foundation-rails/blob/master/vendor/assets/stylesheets/foundation/_settings.scss

José Eduardo Biasioli over 5 years ago

Cheyne, I may be wrong, but I believe the emCalc function is now called rem-calc().

Joshua Steele over 5 years ago

I just upgraded my Rails 3.2 app from F4 to F5. There were a few bumps, but overall it's working fine for me. So here are some observations.

1) I too was surprised at the empty foundation_and_overrides file. However, it still works as you would expect. All the SASS variables for a given component are available at the bottom of the docs page for that component. I agree, it's nice to have them all in one place where you can just switch them on/off (and I assume the Zurb crew will get that running for us soon) but in the meantime, if you're using a component, just paste in all the vars for that component and change what you need. Works for me.

2) Yes, emCalc() is now rem-calc(). I develop in Chrome, and at seemingly random points Chrome will not recognize rem-calc(). However, when that happens, I just fall back to using ems or even rem. For some reason, rem-calc calls in my custom.css.scss file seem to be recognized without a problem, while similar calls (setting various SASS vars) in the founation_and_overrides file have to be in em/rem. (If you notice that our rem-calc() changes are not being recognized, check the dev tools panel in Chrome and look at what styles are being used. Often, I would see a little yellow warning triangle next to rem-calc, indicating that Chrome was ignoring it.)

3) As for the upgrade process for Rails, I agree - it seemed a bit half-baked. Happily, the inner workings seem to be in place, just the docs are a bit sparse. (meaning, the gem docs on Github) So here's what I did:
- Checkout a topic branch in Git!
- Comment out (or remove) the old zurb-foundation gem in my Gemfile
- Add the new one: foundation-rails
- Bundle install
- rails g foundation:install
- Then just check through your assets and make sure everything is in order. One point that was confusing to me was whether or not to rename application.css to application.scss. In the end, I left it as css and everything seems to work fine. (That's how I had it under F4.)
- So in application.css I have this:
CSS
*= require_self
*= require foundation
*= require_tree .
*/

- In application.js I have this:
```Javascript
//= require jquery
//= require jquery_ujs
//= require foundation
//= require_tree .

$(document).foundation();

  - At the bottom of foundation_and_overrides I have this:
```CSS 
@import 'foundation';
  • And at the top of my custom css file, I have this:
@import "foundation_and_overrides";

The one sticky point is that my custom.css.scss no longer appeared last in the list of stylesheets loaded by Rails. It was just loading them in alphabetical order, which meant that 'foundation_and_overrides' was taking precedence over my custom.css.scss file. I'm sure there's a valid reason for this, I just haven't had time to research it. Meanwhile, I'm getting around it by renaming my own css file z-custom.css.scss, which places it at the bottom of the list. A hack to be sure, but everything is working.

Other than that, I'm good. Of course, I had to go though and tweak markup all over the place, but that was fairly straightforward.

Hope this was helpful. :)

Stakoov over 5 years ago

Joshua Steele if you want to work rem-calc everywhere must @import "foundation/components/globa" you also import foundation/functions but there has problem with $base-rem (i think) variable.

Clement over 5 years ago

What a mess it's been so far using this gem. If only the gem had a readme file which explained what files we're meant to have and where they're meant to be.

Joseph DeVenuta over 5 years ago

I can vouch that a lot of this remains unfixed. I have the most recent gem and the related updates in bower_components. Things were working fine until all of a sudden I started getting errors regarding rem/em issues.

Incompatible units: 'rem' and 'em'.

I had done nothing new when this started happening. I'm a huge Foundation fan, but the 5.x rollout has been sloppy. I've easily lost a day or more of productivity just getting things working within the scss files and the asset pipeline.

Joseph DeVenuta over 5 years ago

As mentioned in my other recent post I was able to fix this by doing the following...
http://foundation.zurb.com/forum/posts/1706-foundation-javascript-not-working-with-rails-4

The css compiling was puking regarding a change to how Foundation deals with rem/em. It specifically referenced an issue in the foundation_overrides.scss file.

Incompatible units: 'rem' and 'em'. 

Nothing would fix the issue, and it was not possible to re-run "rails g foundation:install" as this threw an error as well. Finally, I just created a new rails app and ran the "rails g foundation:install" command. I copied the contents of the resulting foundation_overrides.scss file into the one in my existing app. I removed all the manual @imports in my custom.scss file. Everything immediately started to work.

Shawn Scammahorn about 5 years ago

I was able to get the rem-calc function to work for the topbar margin by editing settings.scss.

I made sure the had to uncomment the following 2 lines:

@import "foundation/functions";
$topbar-margin-bottom: rem-calc(30).

I made my "global" settings changes in 'settings.scss' and it seems to work.

Edit: These 2 lines do not appear sequentially. You'll have to search for them.