Where have all the Sass variables gone in Foundation 6?

[GarySwift]

( Please label question)

This is the first time I have started a new project using Foundation 6 and I do not like the new sass variables style at all.

Here is an example of the old variables:

// 34. Top Bar
// - - - - - - - - - - - - - - - - - - - - - - - - -

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

// Background color for the top bar
// $topbar-bg-color: $oil;
// $topbar-bg: $topbar-bg-color;

// Height and margin
// $topbar-height: rem-calc(45);
// $topbar-margin-bottom: 0;

// Controlling the styles for the title in the top bar
// $topbar-title-weight: $font-weight-normal;
// $topbar-title-font-size: rem-calc(17);

// Set the link colors and styles for top-level nav
// $topbar-link-color: $white;
// $topbar-link-color-hover: $white;
// $topbar-link-color-active: $white;
// $topbar-link-color-active-hover: $white;
// $topbar-link-weight: $font-weight-normal;
// $topbar-link-font-size: rem-calc(13);
// $topbar-link-hover-lightness: -10%; // Darken by 10%
// $topbar-link-bg: $topbar-bg;
// $topbar-link-bg-hover: $jet;
// $topbar-link-bg-color-hover: $charcoal;
// $topbar-link-bg-active: $primary-color;
// $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%);
// $topbar-link-font-family: $body-font-family;
// $topbar-link-text-transform: none;
// $topbar-link-padding: ($topbar-height / 3);
// $topbar-back-link-size: rem-calc(18);
// $topbar-link-dropdown-padding: rem-calc(20);
// $topbar-button-font-size: .75rem;
// $topbar-button-top: 7px;

// Style the top bar dropdown elements
// $topbar-dropdown-bg: $oil;
// $topbar-dropdown-link-color: $white;
// $topbar-dropdown-link-color-hover: $topbar-link-color-hover;
// $topbar-dropdown-link-bg: $oil;
// $topbar-dropdown-link-bg-hover: $jet;
// $topbar-dropdown-link-weight: $font-weight-normal;
// $topbar-dropdown-toggle-size: 5px;
// $topbar-dropdown-toggle-color: $white;
// $topbar-dropdown-toggle-alpha: .4;

// $topbar-dropdown-label-color: $monsoon;
// $topbar-dropdown-label-text-transform: uppercase;
// $topbar-dropdown-label-font-weight: $font-weight-bold;
// $topbar-dropdown-label-font-size: rem-calc(10);
// $topbar-dropdown-label-bg: $oil;

// Top menu icon styles
// $topbar-menu-link-transform: uppercase;
// $topbar-menu-link-font-size: rem-calc(13);
// $topbar-menu-link-weight: $font-weight-bold;
// $topbar-menu-link-color: $white;
// $topbar-menu-icon-color: $white;
// $topbar-menu-link-color-toggled: $jumbo;
// $topbar-menu-icon-color-toggled: $jumbo;
// $topbar-menu-icon-position: $opposite-direction; // Change to $default-float for a left menu icon

// Transitions and breakpoint styles
// $topbar-transition-speed: 300ms;
// Using rem-calc for the below breakpoint causes issues with top bar
// $topbar-breakpoint: #{lower-bound($medium-range)}; // Change to 9999px for always mobile layout
// $topbar-media-query: "#{$screen} and (min-width:#{lower-bound($topbar-breakpoint)})";

// Top-bar input styles
// $topbar-input-height: rem-calc(28);

// Divider Styles
// $topbar-divider-border-bottom: solid 1px scale-color($topbar-bg-color, $lightness: 13%);
// $topbar-divider-border-top: solid 1px scale-color($topbar-bg-color, $lightness: -50%);

// Sticky Class
// $topbar-sticky-class: ".sticky";
// $topbar-arrows: true; //Set false to remove the triangle icon from the menu item
// $topbar-dropdown-arrows: true; //Set false to remove the \00bb >> text from dropdown subnavigation li//

Here are the new variables:

// 35. Top Bar
// -----------

$topbar-padding: 0;
$topbar-background: #121212;
$topbar-link-color: #ffffff;
$topbar-input-width: 200px;

What the hell? I really grew to like the old way where almost everything was controlled by a variable.

Anyone care to explain why they did this?

[dantahoua]

Yup I found it strange also. I had to override all the settings for a top-bar I was making on a website, so CSS was kind duplicated at the end... I almost deactivate top-bar in the Foundation to avoid having duplicate css...

[GarySwift]

Actually, after spending a little time with this, It may mot be so bad. Instead of a big list of variables that may be hard navigate for some, we now have _topbar.scss (_assets/scss/modules/topbar.scss) which is bit more intuitive as it can be read as CSS.

But I was so angry until I figured this out. I was about to abandon this completely. Now, if only we could have the left menu feature back.

[olefredrik]

Foundation underwent a major rewrite from version 5 to 6. It's actually as much as 50% reduction in code compared with the previous version, which makes things easier to overwrite.

It may seem unfamiliar at first, but after using F6 a while, I would personally not go back to F5.

I will close this issue, since it looks like you found a solution to the problem.