sass学习笔记（2）

1.父选择器的标识符&

下面这种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;
}