嵌套

sass最大的也是最常用的功能就是嵌套了。

#nav {
  ul {
    color:red;
  }
}

这种写法可以理解为：

#nav ul {
  color:red;
}

当我们要对#nav下多个元素控制css样式的时候，嵌套就显得非常方便，因为父选择器我们只需要写一次。

虽然说可以无限嵌套下去，但是如果你根据dom树的结构进行嵌套，你会发现维护起来非常麻烦，因为内容一多，你可能都不知道这个class的父级是谁，所以一般来说，sass的嵌套最好保持在四层以内。

嵌套属性

我们写css经常会有很多重复的前缀名，比如说font系列的前缀，background的前缀，前面都是相同的，只有后面部分不同，所以我们可以进行属性的嵌套

font: {
  size:19px;
  weight:bold;
}
background: {
  color:red;
  image:url("xxx.jpg");
}

这种属性嵌套可以转换为：

font-size:19px;
font-weigth:bold;

background-color:red;
background-image:url("xxx.jpg");

这样就可以省去了书写重复的前缀的代码，及其便捷。