How to make parent selector interpolated in the middle of nested selector in sass/scss

Question

I'd like to get the result below using sass nesting

css

.box {...}
h3.box-title {...}

I tried code like this, but it causes an error.

sass

.box {
    h3.&-title {
        ...
    }
}

I'd like to know if there is any way to do this keeping sass nesting?

I know that it's not good to write HTML element on CSS, but I'm working on a project that I can't modify existing CSS and need to overwrite them.

Answer 1

Try this:

.box {
    @at-root h3#{&}-title {
        ...
    }
}

I used the sass interpolation #{} to compile expectedly the value of & , and @at-root to prevent the prefix .box (prevent resulting to .box h3.box-title because we want h3.box-title only - without the prefix .box )

Here's the captured result:

Anyway, I don't think this is a good practice to write sass/scss

Answer 2

.box

and

.box-title

are two different class names. Unless h3.box-title is a child of .box, honestly, there's no reason you should be nesting it.

Also & is used to look for additional class names. ie

.box {
 &.box-title {} 
}

would be

.box.box-title {}