so my problem as i said already is that i can't see the hover action when hovering the button

Here is my button in html

<button class="btn">button</button>

And here is my code in scss to hover

 .btn{
    background-color: $secondColor;
    font-variant-caps: all-petite-caps;
    border-radius: 2px;
    :hover{
        background-color: aqua;
    }
}

Here is the code in css after 'sass watcher' make it css

.btn {
  background-color: #e5383b;
  font-variant-caps: all-petite-caps;
  border-radius: 2px;
}

.btn :hover {
  background-color: aqua;
}

Here is an image that shows the result

(You can't see my mouse, but i hovered it)

CodePudding user response：

put an '&' on your hover

.btn {
    background-color: $secondColor;
    font-variant-caps: all-petite-caps;
    border-radius: 2px;

    &:hover {
        background-color: aqua;
    }
}

CodePudding user response：

You need to remove the space on .btn :hover {. A space between selectors indicates nested elements so .a .b { would style a b tag nested within an a.

To do this you can add an ampersand to the hover state when nesting like this.

.btn {
    background-color: $secondColor;
    font-variant-caps: all-petite-caps;
    border-radius: 2px;

    &:hover {
        background-color: aqua;
    }
}

An ampersand indicates you should take the parent element and replace it right there. So scss will take .btn and chain it with :hover and you will get the result you expected.

CodePudding user response：

For SCSS if you are nesting and want to use pseudo class or elements you need to put & before any pseudo class or pseudo elements

SCSS:

.class {
    margin: 0;
    padding: 0;
    &:hover {                 // Notice the use of '&' before pseudo class 'hover' 
       background-color: red; 
    }
}

this will result like

.class {
    margin: 0;
    padding: 0;
}

.class:hover {
    background-color: red;
}