0

我今天早上才开始使用 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;
}

我知道这只是一件小事，但它会让我非常开心。

4

1 回答 1

2

是的，完全有可能满足您的强迫症需求：基本上您需要确保编译器以expanded风格输出。

从文档：

嵌套

#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，但您的构建系统也可能在某处公开该选项 - 检查其文档。

于 2013-11-08T10:00:05.877 回答