SCSS to CSS, specificity around nested tags/classes with Attribute Selectors Applied?

Question

I'm applying a .spin to an <i> : it's rotating an icon. The icon already has a transform applied, so the .spin will have the original transform plus the rotate one:

The first approach did not work, as the original transform took precedence. I want to know why the second approach worked?

Note: compiled with Angular , so using Shadow Dom Emulation

// SCSS
.menu-button {    
    i {        
        transform: translate(-50%, -50%);        
    }
}
i.spin {
    transform: translate(-50%, -50%) rotate(90deg);
}


// CSS Compiled (compiled with Angular, so using Shadow Dom Emulation)
.menu-button[_ngcontent-c4] { }

.menu-button[_ngcontent-c4] i[_ngcontent-c4] {
    transform: translate(-50%, -50%);
}

i.spin[_ngcontent-c4] {  
    transform: translate(-50%, -50%) rotate(90deg); 
}

Changing it to the following works - not sure why exactly

// SCSS
.menu-button {    
    i {        
        transform: translate(-50%, -50%);    
        &.spin {
            transform: translate(-50%, -50%) rotate(90deg);
        }
    }
}

// Compiled CSS
.menu-button[_ngcontent-c4] {}

.menu-button[_ngcontent-c4] i[_ngcontent-c4] {
    transform: translate(-50%, -50%);
}
.menu-button[_ngcontent-c4]   i.spin[_ngcontent-c4] {  
    transform: translate(-50%, -50%) rotate(90deg); 
}

Answer 1

This doesn't really have anything to do with SCSS or Angular, but just with CSS precedence rules.

In your first approach, the former rule is simply more specific and therefore gets precedence over the latter.