Question

我正在学习Sass。我正在通过嵌套类部分。它有以下片段。

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

在我的项目中使用Sass。嵌套类是在&运算符的帮助下编写的。例如。相同的代码段写为：

nav {
  & ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  & li { display: inline-block; }

  & a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

两个代码段都生成相同的CSS：

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

我想知道的是这位&运营商在这做什么？可以省略吗？

Answer 1

两个代码段都生成相同的CSS，因为你在＆amp;后面有一个空格，但如果你删除了你应该得到的空格

navul {
  margin: 0;
  padding: 0;
  list-style: none;
}
navli {
  display: inline-block;
}
nava {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

但是在这种情况下它没有任何意义，所以当你在＆amp; 之后有一个课时我们会这样使用它：

nav {
  &.class1 {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  &.class2 { display: inline-block; }

  &.class3 {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

你会得到：

nav.class1 {
    margin: 0;
    padding: 0;
    list-style: none;
  }

nav.class2 { display: inline-block; }

nav.class3 {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }

Answer 2

在深入研究文档后，我找到了对& here的解释。所以基本上&是父选择器。来自doc：

有时在其他情况下使用嵌套规则的父选择器很有用比默认方式。例如，您可能想要特别的当选择器悬停在身体上或身体上时的样式元素有一定的类。在这些情况下，您可以明确地使用＆amp;指定父选择器的插入位置字符。例如：

<强> SCSS ：

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

<强> CSS ：

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

a:hover {
  text-decoration: underline;
}

body.firefox a {
  font-weight: normal;
}

萨斯：＆amp;在定义嵌套类时

2 个答案: