Zurb Foundation SASS variable

Question

I am using Zurb\'s Foundation framework, and I would like to know how I can edit the default values of the SASS variables. I searched all over the internet but I was not able to

Answer 1

jOk, there are global variables you can configure (_settings.scss), there are also default (!default) variables at a module level, you can find documentation of in the online docs, i.e. for buttons http://foundation.zurb.com/docs/components/buttons.html (scroll to bottom).

Because these variables are assigned with SASS's !default it is possible to override this in the global scope, but you must make the new variables available before the styles are declared. As in, the variables must appear in the cascade before the buttons do.

Answer 2

After creating a Foundation project, look for a "_settings.scss" partial that will contain all those variables.

Scroll down on this page: Zurb Foundation 4—Sass Documentation to where it says "Foundation Global Settings and Mixins" for the code in that file.

Answer 3

You should be looking into Sass that is already explained on their site and can be found here. I suggest you start reading the documentations for V3, Foundation 3, as those docs explain better how you can harness the power of Sass with Foundation. You can start reading here then do further reading here. Honestly, Zurb does a fantastic job of documenting their Foundation framework and all you need to know, 99% if not all, are already on their documentation pages.