SASS Conditional: set Property Value based on another Property Value

Question

I'm using slideout.js for a mobile nav and upon each page load, the menu flashes on the screen for a moment and disappears until the hamburger button is toggled. This doesn't happen if I set the div containing the nav to display: none, but of course when I open the menu, none of the links are displayed.

My question is, using Sass, can I create a conditional that performs the following logic on two separate classes:

if .slideout-menu is not set to display: block

then

.mobile-nav should be set to display: none;

webdevdani · Accepted Answer · 2017-11-02 01:18:33Z

1

CSS can't react to changes that happen on a page without JS help besides from pseudo-classes, so unfortunately you can't target it that way. slideout.js adds classes to style different states of the slide-out menu so try targeting those.

Try something like this:

.slideout-menu .mobile-nav {
   display: none;
}
.slideout-open .slideout-menu .mobile-nav {
     display: block; // or whichever display property you need
}

Going off of the CSS states in index.css from https://slideout.js.org/

answered Nov 2, 2017 at 1:18

webdevdani

1,1127 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Evan Hickman Over a year ago

Thanks, a slight variation of this worked perfectly. I was overcomplicating it.

Collectives™ on Stack Overflow

SASS Conditional: set Property Value based on another Property Value

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related