CODEWITHSUNDEEP
cssnode-sass
Hubert Kubasiewicz
Hubert Kubasiewicz

Reputation: 375

Why this code is not working - sass

This is working perfectly:

.navbar_ind {
  background-color: blue;
}
.navbar_ind .nav-link:hover {
  color: red;
}

but when I am doing like this it does not work, why?

.navbar_ind {
 background-color: blue;
&__nav-link:hover {
  color: red;
}
}

Upvotes: 0

Views: 246

Answers (3)

Kiran Dash
Kiran Dash

Reputation: 4956

You are using '&' selector the wrong way. It is not needed for child selectors.

The equivalent SASS for the CSS 

.navbar_ind {
  background-color: blue;
}
.navbar_ind .nav-link:hover {
  color: red;
}

is

.navbar_ind {
 background-color: blue;
  .nav-link:hover {
    color: red;
  }
}

The equivalent SASS for the CSS 

.navbar_ind {
  background-color: blue;
}
.navbar_ind.nav-link:hover {
  color: red;
}

is

.navbar_ind {
 background-color: blue;
  &.nav-link:hover {
    color: red;
  }
}

Read more about the & selector.

Upvotes: 1

Michel Tomas - superbiche
Michel Tomas - superbiche

Reputation: 375

This:

.navbar_ind {
    background-color: blue;

    &__nav-link:hover {
        color: red;
    }
}

will compile to: 

.navbar_ind {
    background-color: blue;    
}
.navbar_ind__nav-link:hover {
    color: red;
}

What you need is: 

.navbar_ind {
    background-color: blue;
    // The ampersand selector isn't even needed.
    & .nav-link:hover {
        color: red;
    }
}

Upvotes: 3

Ricardo Aquino
Ricardo Aquino

Reputation: 31

You can use & with space ou not use it at all, like this:

.navbar_ind {
 background-color: blue;
& .nav-link:hover {
  color: red;
}
}

Or like this:

.navbar_ind {
 background-color: blue;
.nav-link:hover {
  color: red;
}
}

Both should work fine

Upvotes: 3

Related Questions