Tricky sass selector nesting

Question

I'm currently adding a dark mode to a site of mine. The change is all handled via a script and takes into account the users preference and also the current appearance of their machine. I basically end up with a 'dark' class on <body> if in dark mode otherwise nothing.

Everything is working perfectly but on one element I need to change the background image based on this but i'm encountering a problem because my top level selector is already based on body.

Here's my code:

.page-home {
  .home-intro__caricature {
    @include ratio-box(100%);
    width: 100%;
    border-radius: 50%;
    background-color: var(--main-background-color);
    background-image: url('../src/svgs/caricature.svg'), url('../src/svgs/pattern-light.svg');
    background-repeat: no-repeat, repeat;
    background-position: center bottom, center center;
    background-size: contain, auto;
    transform: rotateY(0deg);
    z-index: 2;
    transition: box-shadow 0.2s ease-in-out;

    &.dark {
      background-image: url('../src/svgs/caricature.svg'), url('../src/svgs/pattern-dark.svg');
      background-repeat: no-repeat, repeat;
      background-position: center bottom, center center;
      background-size: contain, auto;
    }
  }
}

The issue is that .page-home is a class on <body> and .dark also needs to be so. How can I construct the selector so that .dark is added onto the selector for body?

score 2 · Answer 1 · answered Sep 07 '19 at 20:53

2

If I've understood your question properly, the following should work.

There's also no need to reiterate the other background properties.

.page-home {
  .home-intro__caricature {
    @include ratio-box(100%);
    width: 100%;
    border-radius: 50%;
    background-color: var(--main-background-color);
    background-image: url('../src/svgs/caricature.svg'), url('../src/svgs/pattern-light.svg');
    background-repeat: no-repeat, repeat;
    background-position: center bottom, center center;
    background-size: contain, auto;
    transform: rotateY(0deg);
    z-index: 2;
    transition: box-shadow 0.2s ease-in-out;
  }

  &.dark {
    .home-intro__caricature {
      background-image: url('../src/svgs/caricature.svg'), url('../src/svgs/pattern-dark.svg');
    }
  }
}

answered Sep 07 '19 at 20:53

Alex

21
1

Thanks. I should have clarified. I realise I could split it out a bit like that. I was trying to see if there would be solution without repeating part of the selector a little. Just to keep things a little more concise. The other properties werent meant to be there. Left them in after copy pasting. Sorry about that. – rctneil Sep 07 '19 at 20:57
I don't think there's a better SASS solution to be honest. You could, of course, make the SASS more concise by adding a class to the child element with JavaScript. – Alex Sep 07 '19 at 21:14
Yeh, i couldn't think of one, hence my post. I could add a class via JS but i'll most likely have a similar issue in a couple of places so i don't think i'll go that route. I'll go with the split route like you suggested i think. Thanks – rctneil Sep 07 '19 at 21:51

Tricky sass selector nesting

1 Answers1