Sass Nesting for: Hover Does Not Work [Duplicate]

Name: Sass Nesting for: Hover Does Not Work [Duplicate]
Uploaded: 2026-09-27T16:34:39+00:00
Duration: 17 min 54 s
Description: I've Written This Code, but It Does Not Work. What Is My Problem? .Class { Margin:20Px; :Hover { Color: Yellow; } } 0 2 Answers for Concatenating Selectors...

Question

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

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

Accepted Answer

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 "&".

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

Sass Nesting for: Hover Does Not Work [Duplicate]

Must Read

2 Answers

Sophia Al-Mansoor