Menu icon Foundation
Getting the sass version of foundation working on rails.

I'm confused as to how to use the scss version of the framework. I'm using rails. I tried to use the foundation gem, but it kept forcing me to use application.css and I couldn't figure out how to change that i don't want to use application.css as I'm trying to integrate foundation into an already created project.

I then tried to use bower to install foundation in my rails project, but for some reason when i try to import "foundation-sites/scss/foundation" into my manifest file it just imports the comments from foundation-sites/scss/foundation.scss, but doesn't import any of the content of the scss file.

Is there any real advantage to using scss version of foundation, so far its been quite a headache and the css version just works, but I fell maybe its worth the headache in the end to get the scss version working?

Can anyone help? What am I doing wrong?

rails

I'm confused as to how to use the scss version of the framework. I'm using rails. I tried to use the foundation gem, but it kept forcing me to use application.css and I couldn't figure out how to change that i don't want to use application.css as I'm trying to integrate foundation into an already created project.

I then tried to use bower to install foundation in my rails project, but for some reason when i try to import "foundation-sites/scss/foundation" into my manifest file it just imports the comments from foundation-sites/scss/foundation.scss, but doesn't import any of the content of the scss file.

Is there any real advantage to using scss version of foundation, so far its been quite a headache and the css version just works, but I fell maybe its worth the headache in the end to get the scss version working?

Can anyone help? What am I doing wrong?

Rafi Benkual almost 4 years ago

On the subject of is SCSS/Sass worth it? Hell yeah!

There are some amazing simple ways to custom and organize projects, and write SCSS that make it all worth it.

Themeing your site with some simple settings is fast and keeps you DRY

$global-width: rem-calc(1200);
$global-font-size: 100%;
$global-lineheight: 1.5;
$primary-color: #2199e8;
$secondary-color: #777;
$success-color: #3adb76;
$warning-color: #ffae00;

You can also remove unused components to reduce file size by just commenting them out:

// Components
@import 'grid/grid';
@import 'typography/typography';
// @import 'forms/forms';
// @import 'components/visibility';
@import 'components/float';
@import 'components/button';

File structure sanity is easier to accomplish
https://zurb.com/expo/lessons/avoid-a-cluttered-mess-sensible-sass-file-structure

Nesting SCSS makes writing and reading it easier.

And Sass maps are awesome for making complex changes easy. You can't do this in CSS. Adding/changing breakpoints:

// 2. Breakpoints
// --------------

$breakpoints: (
  small: 0,
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
);
$breakpoint-classes: (small medium large);

Rafi Benkual almost 4 years ago

If you are using Rails, it will be a Sass project anyways, right? The Foundation 5 rails gem is what we use here: https://rubygems.org/gems/foundation-rails/versions/5.5.3.2

Stewart almost 4 years ago

I didn't want to use the gem because I wanted to use Foundation 6. I have gotten foundation 6 working with rails now and you are right, it is SO much easier with sass compared to overriding with css, once you get over the initial hump of getting everything working!

Really appreciate your reply as it convinced me to stick with it!

Pat almost 4 years ago

Hi Stewart

What did you do to get it working? i am in the same position "foundation-sites/scss/foundation" imports the specified file but not the proceeding imports within that file

cheers

Gregoire Barzotti over 3 years ago

Hi Pat,

 

Just in case you still need it, I was facing the same problem as you and I just added "@include foundation-everything;" at the very bottom of foundation-sites/scss/foundation.scss and now it works.

 

Hope it helps,

Greg

Paul Hollyer over 3 years ago

Hi All,

For anyone that finds this thread, I've been using Foundation 5 with Rails for well over a year now with no hassle, and am currently in the process of upgrading to F6 - albeit painfully :)

I use the foundation-rails gem - as of writing it is currently at 6.2.0.1.

Simply install the gem, run 'bundle install', and then 'rails g foundation:install' and you should be set to go.

I've uploaded a bare bones rails app that is set up to use F6 (it actually demonstrates a problem I've got with the topbar), but it will give anyone struggling with Foundation & Rails a place to start from or reference.

You can clone my rails app on github, it's here.

The Foundation Rails gem is here.

Now to get Angular working with Rails......

Regards

Paul