在Sass中，共有3种注释方式：（1）//注释内容；（2）/*注释内容*/；（3）/*!注释内容*/。

一、//注释内容

在Sass中，这种注释方式在编译后不会保留下来。

举例：

$height:20px;body{    //height和line-height值相等，实现单行文字垂直居中    height:$height;    line-height:$height;}

编译出来的CSS代码如下：

body {    height: 20px;    line-height: 20px;}

二、/*注释内容*/

在Sass中，这种注释方式在编译之后会保留下来。因为这种注释方式跟CSS注释方式是相同的，所以编译后会保留下来。

举例：

$height:20px;body{    /*height和line-height值相等，实现单行文字垂直居中*/    height:$height;    line-height:$height;}

编译出来的CSS代码如下：

body {    /*height和line-height值相等，实现单行文字垂直居中*/    height: 20px;    line-height: 20px;}

分析：

我们可以看出，在Sass中使用“/*注释内容*/”这种方式，编译出来的CSS也会保留其注释。

三、/*!注释内容*/

我们都知道压缩工具会删除所有的注释，有些时候为了保留一些版权声明的注释说明，可以采用以下方式：

/*!注释内容*/

也就是说在注释内容前面加上一个“!”，这种压缩工具就不会删除这条注释信息了。不过这种注释方式用得很少，一般在CSS文件顶部为了声明版权信息才会使用。

举例：

/*!Copyright ©2015-2017 www.lvyestudy.com, All Rights Reserved*/$height:20px;body{    height:$height;    line-height:$height;}

编译出来的CSS代码如下：

/*!Copyright ©2015-2017 www.lvyestudy.com, All Rights Reserved*/body {    height: 20px;    line-height: 20px;}