Menu icon Foundation
How to use variables in app.scss

Hi all,

I'm new to Foundation and SASS and need help to use variables in app.scss to modify my stylesheets.

To try to isolate where I'm going wrong I've created a fresh Foundation project using CodeKit v2.0.3. I've used Foundation with Compass option included.

I've made no other changes to the default files other than pasting in the Top Bar HTML and then including

$include-html-top-bar-classes: $include-html-classes;

$topbar-height: 86px; variable in app.scss.

When I do a search for the randomly chosen 86px value in my app.css file for "86px", it doesn't' appear.

I've also created a separate file called top-bar.scss and the variable doesn't seem to work in the compiled top-bar.css file either.

I'm not getting any compiler errors. If I go to settings.scss and modify the variables directly, the changes are reflected.

Can somebody please send me a link or show an example of how to set up the app.scss file to correctly override the settings.scss file? Hopefully this is just a syntax or other simple problem.

Thanks very much in advance.

@import "settings";
@import "foundation";

$include-html-top-bar-classes: $include-html-classes;

$topbar-height: 86px;

// Or selectively include components
// @import
//   "foundation/components/accordion",
//   "foundation/components/alert-boxes",
//   "foundation/components/block-grid",
//   "foundation/components/breadcrumbs",
//   "foundation/components/button-groups",
//   "foundation/components/buttons",
//   "foundation/components/clearing",
//   "foundation/components/dropdown",
//   "foundation/components/dropdown-buttons",
//   "foundation/components/flex-video",
//   "foundation/components/forms",
//   "foundation/components/grid",
//   "foundation/components/inline-lists",
//   "foundation/components/joyride",
//   "foundation/components/keystrokes",
//   "foundation/components/labels",
//   "foundation/components/magellan",
//   "foundation/components/orbit",
//   "foundation/components/pagination",
//   "foundation/components/panels",
//   "foundation/components/pricing-tables",
//   "foundation/components/progress-bars",
//   "foundation/components/reveal",
//   "foundation/components/side-nav",
//   "foundation/components/split-buttons",
//   "foundation/components/sub-nav",
//   "foundation/components/switch",
//   "foundation/components/tables",
//   "foundation/components/tabs",
//   "foundation/components/thumbs",
//   "foundation/components/tooltips",
//   "foundation/components/top-bar",
//   "foundation/components/type",
//   "foundation/components/offcanvas",
//   "foundation/components/visibility";

app.scssvariablesoverride

Hi all,

I'm new to Foundation and SASS and need help to use variables in app.scss to modify my stylesheets.

To try to isolate where I'm going wrong I've created a fresh Foundation project using CodeKit v2.0.3. I've used Foundation with Compass option included.

I've made no other changes to the default files other than pasting in the Top Bar HTML and then including

$include-html-top-bar-classes: $include-html-classes;

$topbar-height: 86px; variable in app.scss.

When I do a search for the randomly chosen 86px value in my app.css file for "86px", it doesn't' appear.

I've also created a separate file called top-bar.scss and the variable doesn't seem to work in the compiled top-bar.css file either.

I'm not getting any compiler errors. If I go to settings.scss and modify the variables directly, the changes are reflected.

Can somebody please send me a link or show an example of how to set up the app.scss file to correctly override the settings.scss file? Hopefully this is just a syntax or other simple problem.

Thanks very much in advance.

@import "settings";
@import "foundation";

$include-html-top-bar-classes: $include-html-classes;

$topbar-height: 86px;

// Or selectively include components
// @import
//   "foundation/components/accordion",
//   "foundation/components/alert-boxes",
//   "foundation/components/block-grid",
//   "foundation/components/breadcrumbs",
//   "foundation/components/button-groups",
//   "foundation/components/buttons",
//   "foundation/components/clearing",
//   "foundation/components/dropdown",
//   "foundation/components/dropdown-buttons",
//   "foundation/components/flex-video",
//   "foundation/components/forms",
//   "foundation/components/grid",
//   "foundation/components/inline-lists",
//   "foundation/components/joyride",
//   "foundation/components/keystrokes",
//   "foundation/components/labels",
//   "foundation/components/magellan",
//   "foundation/components/orbit",
//   "foundation/components/pagination",
//   "foundation/components/panels",
//   "foundation/components/pricing-tables",
//   "foundation/components/progress-bars",
//   "foundation/components/reveal",
//   "foundation/components/side-nav",
//   "foundation/components/split-buttons",
//   "foundation/components/sub-nav",
//   "foundation/components/switch",
//   "foundation/components/tables",
//   "foundation/components/tabs",
//   "foundation/components/thumbs",
//   "foundation/components/tooltips",
//   "foundation/components/top-bar",
//   "foundation/components/type",
//   "foundation/components/offcanvas",
//   "foundation/components/visibility";
Marek Simko over 5 years ago

also, if you change this variable:

$include-html-top-bar-classes: $include-html-classes;

it doesn't mean that without it it wouldn't be in your .css file, because when import foundation, everything is in your .css

however, this variable has different use.

for example you don't want to use basic buttons included in foundation BUT you want to use custom buttons using Sass mixins.

and when you want to use Sass mixins you need to load variables.

then the app .scss would look like this.

@import "settings";

$include-html-button-classes: false;

@import "foundation";

.custom-button-class { @include button; }

http://foundation.zurb.com/docs/components/buttons.html - documentation on creating your own buttons using our Sass mixins.

Marek Simko over 5 years ago

take a look here
http://2i.sk/2i/i/5336ad2f/37408ae793c3a3dcff82c0c837f7696b/8ea94963b0.f.png

... so this mean if you want to change variables , do it inside _settings.scss

matteo cavucci over 5 years ago

Try to manage all your variables overriding on _settings.scss
Here you can find something like :

[...]
$topbar-height: 45px; 
[...]

Try to set there your custom topbar height value.

Rafi Benkual over 5 years ago

Heres a video on using _settings.scss http://youtu.be/Gx-9cgNlZlQ?a

Adam Kelly over 5 years ago

Hi Matteo,

Thanks for taking the time to reply. Modifying the variables in _settings.scss works. However, is this the best way to do it? What are the ramifications for future updates to Foundation? Will these customisations be overwritten? Will I need to redefine my custom values after an upgrade?

And if _settings.scss is the most appropriate place to modifying the values for variables, what is the exact purpose of the app.scss? I've read in some posts that it's better to specify custom variables in that file, which is what I was trying to achieve, and would prefer to be honest.

Adam

Adam Kelly over 5 years ago

Thank you Rafi - that video was exactly what I needed. It would be great if Zurb made an official version for the Foundation Docs.