CODEWITHSUNDEEP
sass
Imperative
Imperative

Reputation: 662

Is there a way to state this bit of SCSS more elegantly?

I'm trying to do a conversion of the popular SevenSpark Ubermenu over to SCSS. I use it on a lot of projects and the pure CSS version is... unwieldy. Doing something this big in SCSS though makes me very aware of my shortcomings.

What would be a piece of logic to compress all of this into a single declaration? (I'm skipping the definitions before it in the interest of brevity):

#megaMenu {
  ul {
    li.menu-item.ss-nav-menu-reg {
      li.menu-item.megaReg-with-sub {
        > a, span.um-anchoremulator {
          padding-right: 20px;
        }
      }
    }
    li.menu-item.mega-with-sub {
      > a, span.um-anchoremulator {
        padding-right: 20px;
      }
    }
    li.menu-item.ss-nav-menu-mega {
      > a, span.um-anchoremulator {
        padding-right: 20px;
      }
    }
  }
}

I keep thinking there has to be a way to juggle around ampersands and selectors so that the padding only has to be specified one time.

The original looks like this:

#megaMenu ul li.menu-item.ss-nav-menu-reg li.menu-item.megaReg-with-sub > a, #megaMenu ul li.menu-item.ss-nav-menu-reg li.menu-item.megaReg-with-sub > span.um-anchoremulator, #megaMenu ul li.menu-item.mega-with-sub > a, #megaMenu ul li.menu-item.mega-with-sub > span.um-anchoremulator, #megaMenu ul li.menu-item.ss-nav-menu-mega > a, #megaMenu ul li.menu-item.ss-nav-menu-mega > span.um-anchoremulator { padding-right:20px; }

Upvotes: 1

Views: 80

Answers (1)

Michał Rybak
Michał Rybak

Reputation: 8706

What about using commas in one of nested selectors:

#megaMenu {
  ul {
    li.menu-item.ss-nav-menu-reg li.menu-item.megaReg-with-sub,
    li.menu-item.mega-with-sub,
    li.menu-item.ss-nav-menu-mega {
      > a, span.um-anchoremulator {
        padding-right: 20px;
      }
    }
  }
}

Upvotes: 2

Related Questions