Home/ Questions/Q 9204311
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T23:40:59+00:00

I want to alternate which variable group that gets used, based on a class

  • 0

I want to alternate which variable group that gets used, based on a class on the HTML tag. So I want something like this.

SCSS variable groups:

.pink {
  $accent: pink;
}

.green {
  $accent: green;
}

.orange {
  $accent: orange;
}

Specify which variable group to use:

<html class="pink">

HTML File:

<section class="accent"></section>

Section Styling:

section.accent {
  background:$accent;
}

So in this example, the section would have a pink background.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    No. This is not possible. Sass is compiled to CSS, and the CSS is served to the user. Sass has no idea about how the document is structured.

    Your example would have to be written something like this in order for it to work:

    section.accent {
    .orange & {
        background: orange;
    }

    .pink & {
        background: pink;
    }

    .green & {
        background: green;
    }
}
    • 0