Menu icon Foundation
How do Sass Variables Work?

I generally don't have a probably changing the value of the variables either in the settings.scss or in my custom.scss. For example I can easily change the font color using "body-font-color", and this in my custom.scss. However I am trying to change the "titlebar-background," and it's not working. In fact when I try to change any of the variables under "23. Off-Canvas" nothing happens. I am working in yeti and titlebar variables aren't in the settings file. Does anyone know what's happening? I thought it might have to do with my HTML, but I don't think so... 

<div class="off-canvas-wrapper">
      <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
        
        <div class="title-bar" data-responsive-toggle="top-bar" data-hide-for="medium">
          <div class="title-bar-right">
            <button class="menu-icon" type="button" data-open="offCanvas"></button>
          </div>
        </div><!--END TITLE-BAR-->

        <div class="off-canvas position-right" id="offCanvas" data-off-canvas data-position="right">

          <!-- Close button -->
          <button class="close-button" aria-label="Close menu" type="button" data-close>
            <span aria-hidden="true">&times;</span>
          </button>

          <ul class="vertical menu" data-dropdown-menu>
              <li><a href="#">One</a></li>
              <li><a href="#">Two</a></li>
              <li><a href="#">Three</a>
              <ul class="nested menu vertical">
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
              </ul>
            </li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div><!--END OFF-CANVAS-->

....

Sasscssyetivariables

I generally don't have a probably changing the value of the variables either in the settings.scss or in my custom.scss. For example I can easily change the font color using "body-font-color", and this in my custom.scss. However I am trying to change the "titlebar-background," and it's not working. In fact when I try to change any of the variables under "23. Off-Canvas" nothing happens. I am working in yeti and titlebar variables aren't in the settings file. Does anyone know what's happening? I thought it might have to do with my HTML, but I don't think so... 

<div class="off-canvas-wrapper">
      <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
        
        <div class="title-bar" data-responsive-toggle="top-bar" data-hide-for="medium">
          <div class="title-bar-right">
            <button class="menu-icon" type="button" data-open="offCanvas"></button>
          </div>
        </div><!--END TITLE-BAR-->

        <div class="off-canvas position-right" id="offCanvas" data-off-canvas data-position="right">

          <!-- Close button -->
          <button class="close-button" aria-label="Close menu" type="button" data-close>
            <span aria-hidden="true">&times;</span>
          </button>

          <ul class="vertical menu" data-dropdown-menu>
              <li><a href="#">One</a></li>
              <li><a href="#">Two</a></li>
              <li><a href="#">Three</a>
              <ul class="nested menu vertical">
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
              </ul>
            </li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div><!--END OFF-CANVAS-->

....
Corey Schaaf over 3 years ago

I know this is trivial but is a typo or a spelling mistake of the variable. Can you confirm that changing other variables works? 

This page should give you a complete reference to all the variables (and $titlebar-background) is listed with a default color of $black; is this the color you've tried to change in the settings file? 

 

http://foundation.zurb.com/sites/docs/off-canvas.html#sass-variables

The other thing is if you have a conflict with your style. Is it just getting overwritten by something with more presidence? If that's the case, then check the order you are importing your styles.  

The _custom.scss file should be after all the other styles get imported in your _app.scss file. 

 

Shannon Schärer over 3 years ago

It usually is something trivial, isn't it? I can change the font-color and off-canvas-background out of my custom file without a problem, just not the title bar. I also placed the title bar at the end of the settings file, because it's not included in there, and that didn't help either. In my app file I moved the custom file up and down, before and after all the imports. That didn't help either, and cause the font-color change to be overridden. This is the setup right now. 

 

Update: I caught those $ where I needed #, that wasn't the problem either.

 

// app.scss

@charset 'utf-8';


@import 'settings';
@import 'foundation';
@import 'custom';
@import 'motion-ui';

@include foundation-global-styles;
@include foundation-grid;
// ... 

// custom.scss

.menu-logo {
	img {
		height: 50px;
	}
}
.hero-image-container {
	width:100%;
}
.header-hero-image {
	width:100%;
}

.row.padded {
	padding: 2rem 0 5rem;
}

.background-gray {
	background-color: $light-gray;
}


$body-font-color: $primary-color;

$offcanvas-background: #fff;

$titlebar-background: $fff;
$titlebar-color: $fff;

Shannon Schärer over 3 years ago

I also look in the developer tools, the color is coming from title-bar.scss which I suppose comes from the @include foundation-title-bar; in the app.scss. It doesn't matter if I place my custom color before or after, it still doesn't work.

 

Upon further inspection, a lot of my custom css is being overwritten by the foundation mixins, in the bower components file... Not even the settings.scss file can change them.