今天完成的事情：

关于sass的功能

子组合选择器和同层组合选择器：>、+和~

article section { margin: 5px }

article > section { border: 1px solid #ccc }

可以用子组合选择器>选择一个元素的直接子元素。上例中，第一个选择器会选择article

下的所有命中section选择器的元素。第二个选择器只会选择article下紧跟着的子元素中命

中section选择器的元素。

用同层相邻组合选择器+选择header元素后紧跟的p元素：

header + p { font-size: 1.1em }

也可以用同层全体组合选择器~，选择所有跟在article后的同层article元素，

不管它们之间隔了多少其他元素：

article ~ article { border-top: 1px dashed #ccc }

可以把它们放在外层选择器后边，或里层选择器前边：

article {

  ~ article { border-top: 1px dashed #ccc }

  > section { background: #eee }

  dl > {

    dt { color: #333 }

    dd { color: #555 }

  }

  nav + & { margin-top: 0 }

}

静默注释

css中注释的作用包括帮助你组织样式、以后你看自己的代码时明白为什么这样写，以及简单的样式说明。

但是，你并不希望每个浏览网站源码的人都能看到所有注释。

sass另外提供了一种不同于css标准注释格式/* ... */的注释语法，即静默注释，

其内容不会出现在生成的css文件中。

body {

  color: #333; // 这种注释内容不会出现在生成的css文件中

  padding: 0; /* 这种注释内容会出现在生成的css文件中 */

}

css的标准注释格式/* ... */内的注释内容亦可在生成的css文件中抹去。当注释出现在原生css不允许的地方，

如在css属性或选择器中，sass将不知如何将其生成到对应css文件中的相应位置，于是这些注释被抹掉。

body {

  color /* 这块注释内容不会出现在生成的css中 */: #333;

  padding: 1; /* 这块注释内容也不会出现在生成的css中 */ 0;

}