Question

我今晚刚刚开始使用Sass，昨晚看了之后。我想我理解它（但如果你不同意，可以随意评论）。我虽然碰到了一个问题，但是它很轻微但引起了强迫症的头部疼痛。

ul#primary-nav {
  font: 400 16px $font-stack;
  margin: 0 auto;
  text-align: center;

  li {
    display: inline-block;
    margin: 0 15px;
    &:first-child {
      margin-left: 0;
    }
    &:last-child {
      margin-right: 0;
    }
  }

  a {
    color: $grey;
    padding: 10px 5px 15px 5px;
    &:hover {
      border-bottom: $blue solid 6px;
      .active {
        font-weight: 700;
      }
    }
  }
}

这将输出以下代码：

ul#primary-nav {
  font: 400 16px "Lato", sans-serif;
  margin: 0 auto;
  text-align: center; }

ul#primary-nav li {
  display: inline-block;
  margin: 0 15px; }

ul#primary-nav li:first-child {
  margin-left: 0; }

ul#primary-nav li:last-child {
  margin-right: 0; }

ul#primary-nav li a {
  color: #777777;
  padding: 10px 5px 15px 5px; }

ul#primary-nav li a:hover {
  border-bottom: #25aae1 solid 6px; }

ul#primary-nav li a.active {
  border-bottom: #25aae1 solid 6px;
  font-weight: 700; }

所以代码本身对我想要的东西很好但是我想知道为什么它将结束段落标记添加到最后一行。有没有办法强制它在

下面的行

ul#primary-nav li a:hover {
  border-bottom: #25aae1 solid 6px;
}

我知道它只是一件小事，但它会让我感到高兴。

Answer 1

是的，完全有可能满足您的OCD需求：基本上您需要确保编译器以expanded样式输出。

来自the docs：

<强>嵌套

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

<强>扩展

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

从命令执行sass style.css --style expanded，但您的构建系统也可能在某处公开该选项 - 检查其文档。

编译Sass放置}在最后一行的末尾

1 个答案: