Menu icon Foundation

This post has been closed. No new replies can be added.

Jeremy Englert about 4 years ago

Part of the beauty of Foundation is that it is very flexible in this regard, however, here are my thoughts.

The _settings.scss file is where you will override any Foundation specific variables. You can also set your own variables here, but I wouldn't write full-blown styles in this file.

app.scss (or whatever you decide to name your stylesheet) is where you will put all of your custom styles.

Essentially, settings.scss for variables. app.scss for styles.

Rafi Benkual about 4 years ago

Jeremy is right! This is how we recommend you use it.

Astrid Paris about 4 years ago

Thanks! :)

Where do custom styles written in app.scss go? (After the @import directive?)

Rafi Benkual about 4 years ago

Yes, after all the imports.


//   "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";

// center

@mixin centerer {
  position: relative;
  top: 50%;

// blog 

.movie {
  background-color: #e67e22;
.health {
  background-color: #2ecc71;
.pirate {
  background-color: #2c3e50;
.sass {
  background-color: #e74c3c;
.code {
  background-color: #8e44ad;

Astrid Paris about 4 years ago