Sass SCSS是&&引用；针对嵌套儿童的必要性？

我试图弄清楚&符号在嵌套元素之前使用时的作用。我在针对家长之后使用它，但在它似乎没有必要之前使用它

这个

ul {
  list - style: none;
  text - align: left; 
  & li {
    margin - bottom: 17 px;
  }
}

似乎编译到与此相同的

ul {
  list - style: none;
  text - align: left;
  li {
    margin - bottom: 17 px;
  }
}

---

我认为你的情况应该是一样的在使用类命名方法（如BEM）时，通常用于创建复杂的类名。例如，要获得类“ul_styled”，可以使用

ul{
某种风格。。。
&_风格{
某种风格。。。
}
}

我认为你的情况应该是一样的在使用类命名方法（如BEM）时，通常用于创建复杂的类名。例如，要获得类“ul_styled”，可以使用

ul{
某种风格。。。
&_风格{
某种风格。。。
}
}

sass中的

&

-操作符并不意味着要做你认为它应该做的事情-它只是为了你的方便，而不是爆炸

您可以使用组合多个属性（类、id等）来减少loc，如下所示：

.a {
    color: white;
    &.b {
        font-size: 1.5rem;
    }
}

编译时变为：

.a {
    color: white;
}
.a.b {
    font-size: 1.5rem;
}

---

阅读本文的更多内容：

sass中的

&

-操作符并不意味着要做您认为它应该做的事情-它只是为了您的方便，而不是爆炸

您可以使用组合多个属性（类、id等）来减少loc，如下所示：

.a {
    color: white;
    &.b {
        font-size: 1.5rem;
    }
}

编译时变为：

.a {
    color: white;
}
.a.b {
    font-size: 1.5rem;
}

---

阅读本文的更多内容：

实际上

&

符号是CSS中更高级别元素的占位符，因此我认为您的两个示例不应该完全相同。但是，由于这两种方法都处理

ul

中的所有

li

元素（也向下一级或两级），因此它们在任何子菜单

li

s

上都具有相同的效果，实际上

&

符号是CSS中较高一级元素的占位符，因此我认为您的两个示例不应该完全相同。但是，由于这两种方法都处理

ul

中的所有

li

元素（也向下一级或两级），因此它们对任何子菜单

li

s

都具有相同的效果。不，您不必总是这样。这取决于上下文。

&

符号表示当前元素范围，通常用于添加伪选择器，如

：hover

，

focus

等：

a {
  text-decoration: none;

  &:hover {
    font-weight: bold;
  }
}

汇编至：

a {
  text-decoration: none;
}
a:hover {
  font-weight: bold;
}

而在

：

之前省略

&

将导致错误的选择器：

a {
  text-decoration: none;

  :hover {
    font-weight: bold;
  }
}

汇编如下：

a {
  text-decoration: none;
}

a :hover {
  font-weight: bold;
}

---

这不符合预期。您可以在不进行任何设置的情况下尝试不同的变体。

不，您不必总是这样。这取决于上下文。

&

符号表示当前元素范围，通常用于添加伪选择器，如

：hover

，

focus

等：

a {
  text-decoration: none;

  &:hover {
    font-weight: bold;
  }
}

汇编至：

a {
  text-decoration: none;
}
a:hover {
  font-weight: bold;
}

而在

：

之前省略

&

将导致错误的选择器：

a {
  text-decoration: none;

  :hover {
    font-weight: bold;
  }
}

汇编如下：

a {
  text-decoration: none;
}

a :hover {
  font-weight: bold;
}

这不符合预期。您可以在不进行任何设置的情况下尝试不同的变体