nested scss, css

why does the nested scss not working but plain css does? working

            .text-container {
                &:hover {
                    .text-container__name {
                        background-color: blue;
                    }
                }
            }

            .text-container {
                &:hover {
                    .text-container__name {
                        background-color: blue;
                    }
                }
            }

not working

            .text-container {
                &:hover {
                    &__name {
                        background-color: blue;
                    }
                }
            }

            .text-container {
                &:hover {
                    &__name {
                        background-color: blue;
                    }
                }
            }

4 Replies

MarkBoots•4mo ago

the & is combining the :hover and __name .text-container:hover__name is not a valid selector

ἔρως•4mo ago

for what you want to work, you can use this: &:hover &__name

MarkBoots•4mo ago

ohw, i forgot to press enter, but yes what ἔρως said

ἔρως•4mo ago

it's fine, it happens https://sass-lang.com/playground/#eJwzNNQrSa0o0U3OzytJzMxLLVKo5lJQULPKyC8DstXi4/MSc1PBYgoKSYnJ2elF+aV5KUDlOflFVgpJOaWp1kC5Wq5aAG4HF3A= <-- you can check here that it produces the right css

Gaming

Programming

nested scss, css