0

昨夜 Sass について読んだ後、今朝 Sass を使い始めたばかりです。私はそれを理解していると思います（ただし、同意しない場合は遠慮なくコメントしてください）。ただし、マイナーですが、OCDの頭痛を誘発するという1つの問題に遭遇しました。

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はい、OCD のニーズを満たすことは完全に可能です。基本的に、コンパイラがスタイルどおりに出力していることを確認する必要があります。

ドキュメントから：

ネストされた

#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 に答える