Menu icon Foundation
Adjust properties of _settings.scss on mediaquery

Hello,

Im new to using the media query to have responsive elements but Im not really sure how you can combine this with the properties in _settings.scss. For instance I would like to change the background of my topbar on small screens.
So I added the following code in apps.scss. However, it does not change the appearance of the topbar.

I tried adding the code to _settings but this also did not help. I should also mention that without the mediaquery and simply adding $topbar-dropdown-bg: $white; to settings works just fine :P

Any help would be greatly appreciated as I have been spending the last hour trying to figure this out :)

@media #{$small-only} { 
    $topbar-dropdown-bg: $white;
    }

            

         

FoundationSasstopbarmediaquery

Hello,

Im new to using the media query to have responsive elements but Im not really sure how you can combine this with the properties in _settings.scss. For instance I would like to change the background of my topbar on small screens.
So I added the following code in apps.scss. However, it does not change the appearance of the topbar.

I tried adding the code to _settings but this also did not help. I should also mention that without the mediaquery and simply adding $topbar-dropdown-bg: $white; to settings works just fine :P

Any help would be greatly appreciated as I have been spending the last hour trying to figure this out :)

@media #{$small-only} { 
    $topbar-dropdown-bg: $white;
    }

            

         
James Stone almost 5 years ago

These are just variables and you can't really put them into media queries as you are trying. Maybe you might want to try the sass mixin instead?

otherwise you can override the CSS using background: $white using the appropriate selector and placing that in the media query.

John Mayer almost 5 years ago

Thanks for the reply! I see now how that would not work. Im kind of new to using mixins so could you maybe explain to me how I can use a mixin in this case? Does foundation use a mixin to set the background color of the topbar? and if so where can I find this and how can I include it in apps.scss?

I can tell I'm learning allot just by trying to figure this out :)

James Stone almost 5 years ago

Just open up the scss component in bower_components and take a look. In your case, foundation/scss/components/_top-bar.scss. A mixin is just like a function or proceedure. You can pass it some parameters and it will create CSS in its place.

You will learn a ton by looking at how ZURB created their components, not only in how they built out the CSS, but also how to build your own mixins, components and how to organize and structure them.

If top bar is too crazy, checkout out the buttons file.

Brandon Arnold almost 5 years ago

Yeah, The bottom of every component has the mixins we used. These would let you add the styles of a component to a class of your own. They may end up something like this.

.custom-panel {
  @include panel( $bg:orange, $padding:20px, $adjust:true);
}

@media #{$medium-up} {
  .custom-panel {
    @include panel( $bg:red, $padding:40px, $adjust:true);
  }
}