Sass Nesting for :hover does not work [duplicate]

Question

This question already has answers here:

Sass .scss: Nesting and multiple classes? (3 answers)

Closed 4 years ago.

I've written this code, but it does not work. What is my problem?

.class {
    margin:20px;
    :hover {
        color:yellow;
    }
 }

Answer 1

For concatenating selectors together when nesting, you need to use the parent selector (&):

.class {
    margin:20px;
    &:hover {
        color:yellow;
    }
}

Answer 2

You can easily debug such things when you go through the generated CSS. In this case the pseudo-selector after conversion has to be attached to the class. Which is not the case. Use "&".

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-selector

.class {
    margin:20px;
    &:hover {
        color:yellow;
    }
}