3、SASS - CSS的功能扩展

1、嵌套规则

sass是允许在当前css样式中嵌套另一套css样式，内层样式将外层的选择器作为父选择器；例如：

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

编译为：

#main p {
  color: #00ff00;
  width: 97%; 
}
#main p .redbox {
  background-color: #ff0000;
  color: #000000; 
}

2、父选择器 &

有时候需要直接使用嵌套外层的夫选择器。当给某个元素设置hover样式时，可以用 & 代表嵌套外层的父选择器。例如：

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

编译为：

a {
  font-weight: bold;
  text-decoration: none; 
}
a:hover {
  text-decoration: underline; 
}
body.firefox a {
  font-weight: normal; 
}

& 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器，例如：

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}

编译为：

#main {
  color: black; 
}
#main-sidebar {
  border: 1px solid; 
}

3、属性嵌套

有些css属性有着相同的前缀（命名空间）。比如font-family，font-size，font-weight 都已 font 作为属性的命名空间。为了避免重复输入，sass循序将属性嵌套在命名空间中，例如：

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

编译为：

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; 
}

下一篇文章我们介绍 《 SASS - 注释 /* */ 与 // 》