为什么这段代码不起作用 - sass

Question

这完美地运作：

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

但是当我这样做时它不起作用，为什么？

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

Answer 1

你可以使用＆amp;有空间你根本不使用它，像这样：

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

或者像这样：

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

两者都应该正常工作

Answer 2

此：

.navbar_ind {
    background-color: blue;

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

将编译为：

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

您需要的是：

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

Answer 3

您正在使用＆＃39;＆amp;＆＃39;选择错误的方式。子选择器不需要它。

CSS的等效SASS

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

是

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

CSS的等效SASS

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

是

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

Read more关于＆amp;选择器。