Sass Nesting for :hover does not work

SassCss Selectors

Sass Problem Overview

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

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

Sass Solutions

Solution 1 - Sass

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

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

Solution 2 - Sass

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;
    }
}
Categories
Recommended Sass Solutions
Recommended Css Selectors Solutions

Previous Solution:

HTTP Error 503, the service is unavailable

asp.netIisHttp Error

Next Solution:

Delete empty lines using sed

LinuxUnixSed

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionBeach BoysView Question on Stackoverflow
Solution 1 - SassSinacView Answer on Stackoverflow
Solution 2 - SassEnrico StahnView Answer on Stackoverflow