Scss modify rules based on topmost parent - sass

Question

Let's propose that we have the following scss code:
.a {
.b {
.c {
// rules here
}
}
}
This will output the following css: .a .b .c
Now, if I would like to modify the ruleset of .c if .a gets another class, I would have to modify my scss like this:
.a {
.b {
.c {
// rules here
}
}
&.d {
.b {
.c {
// rules here
}
}
}
}
If there are multiple modifications, my scss will become very long, and the rules refering to .c will be out and apart. Isn't there an easier syntax, to keep all the rules of .c together in the code, so that when I need to modify something, it will be easier? I am thinking about something along these lines:
.a {
.b {
.c {
// rules here
^^&.d {
// go up 2 selectors (hence twicte the ^), and add to the selector the `.d` class, then keep on modifying the current selector `.c` here
}
}
}
}
EDIT: I am used to specify each element (or most, any case), in the selector path, so my selectors are as explicit as possible. The above example can be reflected for a dashboard button, which is deep inside the dashboard, and with the basic approach, I will have to replicate 5 levels of nesting, to specify some style for a button, based on the status of the dashboard (ie. sidebar-open). I could of course add a class directly to the button and style it like that, but imo that's an overkill, as there are a lot of different things that change in the stylesheet for this specific status.
For a complete example, when I click this specific button, the sidebar should pop out, some other elements that are getting overlapped, should be pushed to the right, etc. My javascript, simply adds the status representing class to the whole dashboard, and I would like to style everything accordingly. But this way, the styles for the different elements are far and apart unfortunately.

Answer 1

You can use the
sass variable to structure your nested classes and styles.
#each rule to iterate over every key/value pair to emit styles.
Let's suppose you can have 3 classes on first level i.e x, y, z, with their child classes a, b.
Then your scss variable code will look like below:
$classes: (
x: (
a: (
color: blue,
font-size: 15px
),
b: (
color: blue,
font-weight: 600
)
),
y: (
a: (
color: red,
),
b: (
color: blue,
font-size:20px
)
),
z: (
a: (
color: black,
overflow: scroll
),
b: (
color: black,
font-size: 20px,
background-color: white
)
)
);
Now we can iterate above variable like below:
#each $key, $value in $classes {
.#{$key} {
#each $key1, $value1 in $value {
.#{$key1} {
#each $key2, $value2 in $value1 {
#{$key2}: $value2
}
}
}
}
}
If in case you want to add more classes in the future, then you need follow the same structure and add class names and styles accordingly.
Result (CSS)
.x .a {
color: blue;
font-size: 15px;
}
.x .b {
color: blue;
font-weight: 600;
}
.y .a {
color: red;
}
.y .b {
color: blue;
font-size: 20px;
}
.z .a {
color: black;
overflow: scroll;
}
.z .b {
color: black;
font-size: 20px;
background-color: white;
}
I hope it solves your problem & beautifies your code as well.