SASSの研究ノート（2）

親の識別子を選択します＆

ここでは、これは動作しませんSASS
article a { color: blue; :hover { color: red } }。

次のように解決策は、特別なセレクタ＆SASSを使用することです。

article a {
  color: blue;
  &:hover { color: red }
}

/*编译后*/
article a { color: blue }
article a:hover { color: red }

あなたは、親セレクタの前にセレクタを追加することができます

#content aside {
  color: red;
  body.ie & { color: green }
}

/*编译后*/
#content aside {color: red};
body.ie #content aside { color: green }

2.ネストされたグループセレクタ

次の変更は、セレクタを書くために多くの時間を無駄にします

.container h1, .container h2, .container h3 { margin-bottom: .8em }

SASSは、グループセレクタSASSルール埋め込みルールのロックを解除するとき、それは、各セレクタが正解除外埋め込まれ、特定のシナリオにおいて非常に有用ネスト。

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

3.サブコンビネーションおよびセレクタと同じ層の組み合わせ：>、+と -

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

/*sass会如你所愿地将这些嵌套规则一一解开组合在一起:*/

article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

4.ネストしたプロパティ

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

- 切断、根の後ろにコロンは、このセクション{}ブロックに書き込まれたブロック、サブ属性続い} {:,属性スクライブラインから属性名：ネストされた属性ルールは、そのようなことです。ネストされたCSSセレクタのように、のように、あなたの子供がダッシュによって部分的に財産、根の属性とサブ属性を取り消しますSASS - 効果の最後の世代と連携して、手動で何度もCSSスタイルを記述し、再び同じ：

nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

プロパティの短い形式のために、あなたもルールに例外を示し、以下のように入れ子にすることができます。

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

コンパイルした後、

nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}