Using variables and mixins in Foundation
ruby-on-rails, zurb-foundation
Solution
With new foundation you do:
$include-html-global-classes: false;
@import "foundation/components/global";
- Updated for even newer foundation (see commentS)
Earlier path was
@import "foundation/foundation-global";
Problem
I've found a lot of similar questions to this one but nothing that quite solves my problem. Basically, I'm using foundation 4.x with rails 3.x, everything is working fine with foundation_and_overrides being included in my application.css. I can modify the variables in foundation_and_overrides and it all works fine. However, I want to use the $primary-color variable (and a bunch of others) in one of my other scss files (application/global.css.scss). If i use @import "foudation_and_overrides" in my global css file, then it works, but it includes the entire Foundation CSS twice in my compiled application.css, which is obviously not ideal. I also want to use mixins, such as @include radius() in my global file. This works if I use @import "foundation/components/global" - but then this also ends up with duplicate CSS being compiled. All I want to do is use the global vars & functions, not the CSS - surely this is a really common thing to do? Previously (before foundation) I just put all my scss functions in a helpers file, and imported this in all other scss files that needed it. Another quick Q while I'm here, what class do I use to add the little dropdown triangle thing next to some custom text? Thanks!