SCSS是＆＃34;＆amp;＆＃34;针对嵌套孩子的必要条件？

Question

我试图了解＆amp;在嵌套元素之前使用它时会执行标记。我在以父母为目标后使用它，但在此之前似乎没必要。

此...

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

似乎编译成与此相同...

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

Answer 1

不，你不必总是这样。这取决于具体情况。 &符号表示当前元素范围，通常用于添加: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;
}

哪个不按预期工作。您可以在http://www.sassmeister.com/处尝试不同的变体而无需任何设置。

Answer 2

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

ul {
  somestyle...
  &_styled {
    somestyle...
  }
}

Answer 3

sass中的& - 运算符不是为了做你想做的事情 - 它只是为了你的方便而不仅仅是爆炸。

您可以使用组合多个属性（类，ID等）来减少这样的位置：

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

编译时

成为了这个：

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

在本文中阅读更多内容：https://css-tricks.com/the-sass-ampersand/

Answer 4

实际上&符号是CSS中一个级别元素的占位符，所以我认为你的两个例子不应该完全相同。但由于两者都在li（也是一个或两个级别）中解决所有 ul个元素，因此两者对任何子菜单li都会产生相同的影响< / p>